Angular 带子布线的6个多布线插座

我有一个应用程序模块，它导入两个子模块：

PreparationModule

和

GameModule

。在

AppModule

的根路由中，我有延迟加载

PreparationModule

的“准备”端点

AppComponent

（AppModule的引导组件）html文件仅包含根路由器出口

PreparationModule

有自己的子路由，其中包含两个子路由，并在PreparationComponent中为这些路由指定了路由器出口

我想要实现的是，在路径“/preparation”上，

PreparationComponent

将显示在

AppComponent

路由器出口中。然后，来自

PreparationModule

的子路由将被延迟加载并显示在实例路径“/preparation/intro”的

PreparationComponent

中的命名路由器出口中。在路径“/play”上，我想将

GameComponent

从

GameModule

加载到

AppComponents

路由器出口<代码>游戏模块目前没有指定自己的路由

我做错了什么？我想我解释得很复杂，但也许代码会告诉你更多。

app.component.ts

和

preparation.component.ts

（只是类声明）中没有相关内容，所以我跳过了它们

编辑

我得到的错误是：

error-error:Uncaught（承诺中）：TypeError:undefined不是函数

app.module.ts

app.component.html


app.routing.ts

准备.component.html

@NgModule({
  imports: [
    AppRouting,
    SharedModule,
    GameModule,
    PreparationModule
  ],
  declarations: [
   AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

// These goes inside main <router-outlet></router-outlet> in 
// AppComponent
const routes: Routes = [
  {
    path: 'preparation',
    component: PreparationComponent,
    loadChildren: './preparation/preparation.module#PreparationModule'
  },
  {
    path: 'play',
    component: GameComponent
  },
  {
    path: '',
    redirectTo: '/preparation',
    pathMatch: 'full'
  }
];

export const AppRouting = RouterModule.forRoot(routes);

@NgModule({
  imports:[
    PreparationRouting,
    SharedModule
  ],
  exports:[
    PreparationComponent,
    SettingsComponent,
    IntroComponent,
    FooterComponent
  ],
  declarations:[
    PreparationComponent,
    SettingsComponent,
    IntroComponent,
    FooterComponent
  ]
})
export class PreparationModule {
}

<div id="main-container" fxFlex="80" fxFlex.xs="94" fxFlexOffset="10" fxFlexOffset.xs="3"
     fxLayout="column" fxFlexAlign="center">

  <div fxFlex="4"></div>
  <div fxFlex="92" fxLayout="row" fxLayoutAlign="center center">
    <div fxFlex.gt-md="45" fxFlex.md="60" fxFlex.sm="85" fxFlex.xs="100">
      <router-outlet name="preparation"></router-outlet>
    </div>
  </div>
  <app-footer fxFlex="4"></app-footer>
</div>

const routes: Routes = [
  {
    path: 'intro',
    component: IntroComponent,
    outlet: 'preparation'
  },
  {
    path: 'settings',
    component: SettingsComponent,
    outlet: 'preparation'
  }
];

export const PreparationRouting = RouterModule.forChild(routes);