Lazy Downloads and Nested Routers
I am trying to perform lazy loading with nested routers, but no luck.
Is this supported at all in Angular 4?
This is my use case:
The problem seems to be related to the lazy loaded modules router navigation. This works great if I remove the lazy loading. But here is my setup according to lazy load modules:
In my app.template, I have my main router set.
I have the following application root router
export const ROUTES: Routes = [
{
path: 'user/:id', loadChildren: './user/profile/profile.module#ProfileModule'
}
]
When the profile module is loaded into the main router, it will display a page with two routing tabs and inside profile.module. I have the following child routes defined
const ROUTES: Routes = [
{
path: '', component: ProfileComponent,
children: [
{ path: 'subPath1', loadChildren: '../subModule1/subModule1.module#SubModule1Module' },
{ path: 'subPath2', loadChildren: '../subModule2/subModule2.module#SubModule2Module' },
]
}
];
@NgModule({
imports: [
RouterModule.forChild(ROUTES),
....
]
}
Inside profile.template I have a routing tab defined as follows
<nav md-tab-nav-bar>
<a class="tab-label" md-tab-link [routerLink]="'subPath1'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
Sub path 1
</a>
<a class="tab-label" md-tab-link [routerLink]="'subPath2'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
Sub path 2
</a>
</nav>
<router-outlet></router-outlet>
When I route eg. to / user /: id / subPath2 I would expect subModule2 to be loaded into the md-tab-nav-bar's router-out, but instead it is loaded into the application's main router-router. This closes the profile.component and only displays subodule2 instead of displaying it inside the tab.
Any idea why this doesn't work with lazy load modules?
source to share
No one has answered this question yet
Check out similar questions: