I am finding problem while multiple routing, its loading in single router-oulet how to tell the component to load in specific named outlet? I found out that there is a property in RouterConfig from which i can use outlet to name the router-outlet but i don't know to link it with HTML.
https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html
Define a UI with two router outlets..
<div>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
</div>
Then have a router config that routes a component into that space.
[{
path: 'parent/:id',
children: [
{ path: 'a', component: MainChild },
{ path: 'b', component: AuxChild, outlet: 'aux' }
]
}]
NOTE: the parent route's id parameter will be provided to both children. Remove it if you aren't providing an id.
Related
When directly navigating to a child component in prod mode (ng serve --prod) it fails to load the CSS file, trying to fetch it from a nested path. For instance, navigating to "localhost:4200/doc/" the CSS Request URL is:
localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css.
The error that is given:
Refused to apply style from 'http://localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When accessing the root (localhost:4200) the CSS is loaded correctly. If you then navigate to the child component through the app itself, the problem does not occur.
It only occurs in prod mode, not on the development server. Changed nothing to the regular settings regarding styles.css, it is situated in the default folder.
"styles": [
"src/styles.css"
],
Anyone has any idea how this problem could be caused?
Edit
Found out that the problem lies in navigating to nested routes (helped by the reply of mikegross).
On a route without a nested parameter the problem does not occur, but on a route with a nested parameter (for instance 'doc/:id') it does.
Router module:
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: "full"},
{ path: 'list', component: ListComponent},
{ path: 'doc/:id', component: DocumentComponent},
{ path: '**', redirectTo: ''},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Update (feb. 28)
Since it was still a small project I generated a new angular project, installed same dependencies and literally copy pasted the code.
Although I have no idea why, in the new project the problem does not occur. The only difference lies in a minor version bump (ng 9.0 to 9.1).
I know this is an older post, but I got around this by using query parameters instead of route parameters. example:
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: "full"},
{ path: 'list', component: ListComponent},
{ path: 'doc', component: DocumentComponent},
{ path: '**', redirectTo: ''},
];
(I removed the :id from "doc/:id")
Navigate to the route:
route this._router.navigate(['/doc'],{queryParams: {id: id}});
Then retrieve the query parameter:
this._activatedRoute.snapshot.queryParamMap.get('id');
Coming late to the party. I had the same error with React in 2022.
Initially, I declared the CSS file with a relative path, as follows:
<link rel="preload" href="./style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>
After changing it to an absolute path, it worked
<link rel="preload" href="/style/Avenir-Light.woff2" as="font" type="font/woff2" crossorigin>
Hope it helps future readers.
I have to merge two angular applications into one major angular application. Hence, now i am having two styles.css files in one angular application. On running this application after merging both, css is going completely for the angular application.
Is there any way by which we can call this two style.css files dynamically depending on the requirement? Or I need to check each class one by one?
I recommend you to use two different layouts, each one is a component, so each one has a different set of styles. That it's really easy wit angular router.
In your routing module:
// Layout 1
{
path: '',
component: Layout1Component,
children: [
{ path: 'pageL1_1', component: PageL1_1Component },
{ path: 'pageL1_2', component: PageL1_2Component }
]
},
// Layout 2 routes goes here here
{
path: '',
component: Layout2Component,
children: [
{ path: 'pageL2_1', component: PageL2_1Component },
{ path: 'pageL2_2', component: PageL2_2Component }
]
},
In your app.component.html:
<router-outlet></router-outlet>
The layouts templates has to include the element to in order to show child navigation componets.
IMPORTANT: Each layput controller should disable view encapsulation so styles applies ti child components:
#Component({
selector: 'app-layout_1',
templateUrl: './layout_1.component.html',
styleUrls: ['./layout_1.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class Layout1Component implements OnInit {
...
}
I have setup 2 router outlets(two different divs on the screen that load different stuff). I am able to open pages in but not the other router outlet, so I guess Im missing something.
app.routes.ts
export const appRoutes: Routes = [
{ path: 'component1', component: component1},
{ path: 'component2', component: component2, outlet: 'router2'},
];
app.component.html
<router-outlet></router-outlet>
<router-outlet name="router2"></router-outlet>
routing to component2
<button routerLink="/event-gallery">go</button>
I have a header that has menu consist of categories which they are the same component but different query.
The first call from parent to child is executed perfectly but if i navigateto another category from inside this child component i get error!
I know this is something wrong with the link when i navigate inside this child which make [routerLink] updated instantly.
Also if i navigate from category child component to login component which is separated component will give me the same error!
Note: Same question has been asked in this link with no answer
Nacim Idjakirene Question
Router configuration
const APP_ROUTES: Routes = [
{path: 'landingpage', component: LandingpageComponent },
{path: '', component: IndexComponent, children: [
{path: '', component: HomeComponent},
{path: 'category/:cate', component: CategoryComponent },
{path: 'post/:id', component: PostComponent },
{path: 'profile/:id', component: ProfileComponent }
] },
{path: 'login', component: LogginComponent }
];
See the image
Problem Solved by me after a deep search. i saw the response of a person called
brandonroberts: your router link is invalid and you either need to set a terminal
route
and this solved my problem...
[routerLink]="['','category', cat.id]"
I'm trying to get the routerLink directive to work with matrix parameters. So far the only syntax variant that I've been able to get working is simply the path string.
<a routerLink="/state-scratchpad">Syntax 1 - works</a>
<a routerLink="['/state-scratchpad']">Syntax 2 - doesn't work</a>
<a routerLink="['/state-scratchpad', { tcomp: '1', tmake: '1-7' }]">Syntax 3 - doesn't work</a>
<a routerLink="/state-scratchpad;tcomp=1;tmake=8">Syntax 4 - doesn't work</a>
Navigating in the URL bar to /state-scratchpad;tcomp=1;tmake=8 also works.
Here are my routes:
const routes = [
{ path: '', pathMatch: 'full', redirectTo: '/welcome' },
{ path: 'welcome', component: WelcomeComponent },
{ path: 'state-scratchpad', component: StateScratchpadComponent, params: { tcomp: '', tmake: '' } }
];
I'm using Angular 2.0.0. According to the documentation on the angular.io site the various syntaxes for routerLink values should all work. But only the simplest syntax works. Here are the resulting error messages:
S1: Works
S2: Error: Cannot match any routes: '%5B'/state-scratchpad'%5D'
S3: Error: Cannot match any routes: '%5B'/state-scratchpad'%2C%20%7B%20tcomp%3A%20'1'%2C%20tmake%3A%20'1-7'%20%7D%5D'
S4: Error: Cannot match any routes: 'state-scratchpad%3Btcomp%3D1%3Btmake%3D8'
Any ideas?
First a router link looks like this
<a [routerLink]="['/state-scratchpad', tcomp, tmake]">
This will pass the base url and append the params.
Next your route should look like this
{ path: 'state-scratchpad/:tcomp/:tmake', component: StateScratchpadComponent}
Then when the component is loaded you access the params like this
constructor( private route: ActivatedRoute) {}
ngOnInit(){
this.route.snapshot.params["tcomp"];
this.route.snapshot.params["tmake"];
}