Styjun

I am trying to build an angular app with lazy loaded modules with multiple pages:

src/app
|--app.component.ts
|--app-routing.module.ts
|--app.module.ts
|--app.component.html
|--LazyModuleA
| |--LazyModuleA.module.ts
| |--LazyModuleA-routing.module.ts
| |--LazyPageA.component.ts
| |--LazyPageA.component.html
|--LazyModuleB
 |--LazyModuleB.module.ts
 |--LazyModuleB-routing.module.ts
 |--LazyModuleB.component.ts
 |--LazyModuleB.component.html
 |--LazyPageB
 | |--LazyPageB.component.ts
 | |--LazyPageB.component.html
 |--LazyPageC
 |--LazyPageC.component.ts
 |--LazyPageC.component.html

The LazyPageBComponent and LazyPageCComponent should both be using the LazyModuleBComponent as outlet. However the routes should all be top level like this:

/LazyPageA (AppComponent->LazyPageAComponent)
/LazyPageB (AppComponent->LazyModuleBComponent->LazyPageBComponent)
/LazyPageC (AppComponent->LazyModuleBComponent->LazyPageCComponent)

instead of:

/LazyPageA
/LazyModuleB/LazyPageB
/LazyModuleB/LazyPageC

Therefore I use named router outlets in AppComponent and LazyModuleBComponent that should nest when navigating to LazyModuleB:

app-routing.module
''''''''''''''''''
const routes: Routes = [
 path: 'LazyPageA', loadChildren: './LazyModuleA/LazyModuleA.module#LazyModuleA',
 path: '**', loadChildren: './LazyModuleB/LazyModuleB.module#LazyModuleB'];
@NgModule(imports: [RouterModule.forRoot(routes)], exports: [RouterModule])
export class AppRoutingModule 

app.component
'''''''''''''
<app-root><router-outlet name="app-outlet"></router-outlet></app-root>

LazyModuleA-routing.module
''''''''''''''''''''''''''
const routes: Routes = [
 path: '', component: LazyPageAComponent, outlet: 'app-outlet'];
@NgModule(imports: [RouterModule.forChild(routes)], exports: [RouterModule])
export class LazyModuleARoutingModule 

Up to this point everything works as expected - /LazyPageA returns the LazyPageAComponent.

LazyModuleB.component
'''''''''''''''''''''
<p>Placeholder for a sidebar added later</p>
<router-outlet name="LazyModuleB-outlet"></router-outlet>

LazyModuleB-routing.module
''''''''''''''''''''''''''
const routes: Routes = [
 path: 'LazyPageB', component: LazyPageBComponent, outlet: 'LazyModuleB-outlet',
 path: 'LazyPageC', component: LazyPageCComponent, outlet: 'LazyModuleB-outlet',
 path: '', pathMatch: 'full', component: LazyModuleBComponent, outlet: 'app-outlet',
 path: '**', component: LazyModuleBComponent, outlet: 'app-outlet'];
@NgModule(imports: [RouterModule.forChild(routes)], exports: [RouterModule])
export class LazyModuleBRoutingModule 

By inspecting /LazyPageB I can see, that the named router outlets get nested as expected, however no component is placed in the LazyModuleB-outlet.

Therefore I suspect the mistake in the LazyModuleB-routing.module routes, however I can not find any way to make the routing in LazyModuleB work.

It would be possible to define /LazyPageB and /LazyPageC in the app-routing.module and conditionally display the components in the LazyModuleBComponent using *ngIf and the active route from Router, but obviously nested router outlets are supposed to do something like this.

Edit: By now I have doubts that this is not possible at all and I should probably rethink my project structure. If root routes have to lead to a unique component then I could ditch the lazy loading at all or reorder the compontents to modules that rely on shared modules instead.