延迟加载根路由

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的有效路由，但是显然嵌套的路由器出口应该执行类似的操作。

---

编辑：现在，我怀疑这根本不可能实现，我可能应该重新考虑我的项目结构。如果根路由必须导致一个唯一的组件，那么我可以完全放弃延迟加载，或者将组件重新排序为依赖共享模块的模块。