带有子路由的Angular 6多个路由出口

我有app模块导入两个子模块： PreparationModule 和 GameModule . 在 AppModule 的根路由中，我有'preparation' endpoints ，其中延迟加载 PreparationModule . AppComponent （用于 AppModule 的引导组件）html文件仅包含根路由器插座 . PreparationModule 有自己的子路由，带有两个子路由，并在PreparationComponent中为这些路由命名路由器出口 .

我想要实现的是路径'/preparation' PreparationComponent 将显示在 AppComponent 路由器插座中 . 然后来自 PreparationModule 的子路径将被延迟加载并显示在 PreparationComponent 中的命名路由器插座中，例如路径'/preparation/intro' . 在路径'/play'我想从 GameModule 加载 GameComponent 到 AppComponents 路由器插座 . GameModule 目前没有指定自己的路由 .

我在这做错了什么？我想我用复杂的方式解释了它，但也许代码会告诉你更多 . app.component.ts 和 preparation.component.ts （只是类声明）中没有任何相关内容，所以我跳过了它们 .

编辑

我得到的错误是： ERROR Error: Uncaught (in promise): TypeError: undefined is not a function

app.module.ts

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

app.component.html

<router-outlet></router-outlet>

app.routing.ts

// 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);

preparation.module.ts

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

preparation.component.html

<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>

preparation.routing.ts

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

export const PreparationRouting = RouterModule.forChild(routes);