Ленивая загрузка корневых маршрутов

Question

Я пытаюсь создать угловое приложение с лениво загруженными модулями с несколькими страницами:

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

LazyPageBComponent и LazyPageCComponent должны использовать LazyModuleBComponent в качестве выхода. Однако все маршруты должны быть верхнего уровня, например:

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

вместо:

/LazyPageA
/LazyModuleB/LazyPageB
/LazyModuleB/LazyPageC

Поэтому я использую именованные выходы маршрутизатора в AppComponent и LazyModuleBComponent, которые должны быть вложены при переходе к 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 { }

До этого момента все работало как положено - /LazyPageA возвращает 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 { }

Проверяя /LazyPageB, я вижу, что указанные выходы маршрутизатора вложены, как и ожидалось, однако в LazyModuleB-outlet.

не помещается ни один компонент.

Поэтому я подозреваю ошибку в маршрутах LazyModuleB-routing.module, однако не могу найти способ заставить маршрутизацию в LazyModuleB работать.

Можно было бы определить /LazyPageB и /LazyPageC в app-routing.module и условно отобразить компоненты в LazyModuleBComponent, используя *ngIf и активный маршрут из Router, но явно вложенный розетки маршрутизатора должны делать что-то вроде этого.

---

Редактировать: К настоящему времени у меня есть сомнения, что это вообще невозможно, и мне, вероятно, следует переосмыслить структуру моего проекта. Если корневые маршруты должны приводить к уникальному компоненту, тогда я мог бы вообще прекратить ленивую загрузку или переупорядочить компоненты на модули, которые вместо этого используют общие модули.