Angular 6 multiple routing outlets with child routing

Question

I have app module which imports two child modules: PreparationModule and GameModule. In root routing for AppModule i have 'preparation' endpoint which lazy loads PreparationModule. AppComponent's (bootstrap component for AppModule) html file contains only root router outlet. PreparationModule has its own child routing with two child routes and named router outlet for those routes in PreparationComponent.

What i wanna achieve is that on path '/preparation' the PreparationComponent will be displayed in AppComponent router outlet. Then the child routes from PreparationModule will be lazy loaded and displayed in named router outlet in PreparationComponent on for instance path '/preparation/intro'. On path '/play' i wanna load GameComponent from GameModule into AppComponents router outlet. GameModule doesn't have its own routing specified for now.

What am i doing wrong here? I guess i explained it in complicated way, but maybe code will tell you more. There's nothing relevant inside app.component.ts and preparation.component.ts (just the class declaration) so i skipped them.

EDIT

The error i'm gettings is: 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);

Angular 6 multiple routing outlets with child routing

0 Answers0