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?

+3


source to share





All Articles