Using nested routers in angular 4

Question

Im using multiple router routers to load my components. The external socket of the router is used to download most basic components, such as login, home, 404. I used the socket outlet to load auxiliary components of the home page. This router output is nested inside home.component.

home.component.html

<app-header></app-header> <router-outlet name="homeRoute"></router-outlet> <app-footer></app-footer> 

app.module.ts

 const appRoutes: Routes = [ {path: '', component: HomeComponent, children: [ {path: '', component: DashboardComponent, outlet: 'homeRouter'}, {path: 'user', component: UserComponent, outlet: 'homeRouter'}, {path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'} ]}, {path: 'login', component: LoginformComponent}, {path: '**', component: NotfoundComponent} ]; 

HomeComponent and LoginformComponent must be downloaded from an external router. The home component contains an internal exit router called "homeRouter", which I want to use to download subcomponents of the home page. But navigation of the internal router will not work. I tried to access each component using the router.navigate () method and using the URL. But both of them did not work as expected.

Can someone tell me what is wrong with this code. I studied and tried several previous questions on the same issue, but no one worked fine.

Here are the urls I tried to use for different components

• http://localhost:4200 dashboardComponet (this one works)
• http://localhost:4200/user userComponent (does not work. route to notFoundComponent)
• http://localhost:4200/user/U001 userDetailComponent (doenst work.still route to notFoundComponent)

Answer 1

you do not need a named exit router for nesetd routes, you can remove outlet: 'homeRouter' from routes and name="homeRoute" from the exit router, and it should work.

Having said that, if you have a requirement for multiple routers so that you can load the auxiliary route along with the main route, the name of the router-oulet should be the same as the outlet property. in the Routes you use, you have the output: " homeRouter " and name = " homeRoute ", they must be the same.

Here is a complete example with multi-level nested routes,

Plunker

 import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { Routes, RouterModule, ActivatedRoute } from '@angular/router'; @Component({ selector: 'my-app', template: `<h1>Hello</h1> <a routerLink="/" >Home</a> <a routerLink="/admin" >Admin</a> <a routerLink="/nonexistingroute" >Non existing Route</a> <hr /> <router-outlet></router-outlet> ` }) export class AppComponent { } @Component({ template: `<h1>Home</h1> <a routerLink="/" >Dashboard</a> <a routerLink="/users" >Users</a> <hr /> <router-outlet></router-outlet> ` }) class HomeComponent {} @Component({ template: `<h1>Admin</h1> ` }) class AdminComponent {} @Component({ template: `<h1>Dashboard</h1> ` }) class DashboardComponent {} @Component({ template: `<h1>Users</h1> <a routerLink="user/1" >User 1</a> <a routerLink="user/2" >User 2</a> <hr /> <router-outlet></router-outlet> ` }) class Users {} @Component({ template: `<h1>User {{id}}</h1> ` }) class UserdetailComponent { id=''; constructor(private route: ActivatedRoute) { this.route.params.subscribe(params => { this.id = params['id']; }); } } @Component({ template: `<h1>Not found</h1> ` }) class NotfoundComponent {} const appRoutes: Routes = [ { path: '', component: HomeComponent, children: [ {path: '', component: DashboardComponent}, {path: 'users', component: Users, children: [ {path: 'user/:id', component: UserdetailComponent} ] } ] }, { path: 'admin', component : AdminComponent }, {path: '**', component: NotfoundComponent} ]; @NgModule({ imports: [ BrowserModule,RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent, HomeComponent,AdminComponent,NotfoundComponent, DashboardComponent, Users, UserdetailComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Hope this helps!