angular 5 routing with multiple modules

Question

i'm facing a problem to configure my app routing using multiple modules. i want to separate my application to many modules and route them all in one routing configuration file if possible.

i have 4 modules:

1. AppModule - default root module of the app
2. LoginModule - module that performs login and declares on LoginComponent
3. MainModule - a shared module that declares the basic app layout components such as headers, footers, side-menu and so on.
4. As400screensModule - this module declares on components who should appear inside the app layout with the routing choosing which component to load by the url and <router-outlet> tag.

let's start from my app.routing.ts file

export const routes: Routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' },
  { path: 'app', component: MainComponent, canActivate: [OLAuthGuard],
       children: [
        { path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent },
        { path: 'main-menu', component: MainMenuComponent },
        { path: 'inventory-management', component: InventoryManagementComponent },
        { path: 'items', component: ItemsComponent },
      ]
  },
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: []
})


export class AppRoutingModule {

}

my app.component.html

<router-outlet></router-outlet>
<app-preloader></app-preloader>

first, the router should go to login page and after successful login navigate to '/app/main-menu' which should load from the child routing with MainMenuComponent.

the problems starts when i want to use the <router-outlet> tag in the MainComponent which should load child components from different modules.

my MainComponent.html

<app-header></app-header>
<div class="ol-body">
  <app-side-menu></app-side-menu>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>
<app-footer></app-footer>

my main.module.ts

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    As400screensModule,
    MfrpcModule
  ],
  declarations: [HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent, TestComponent, TestChildComponent],
  exports: [ HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent,TestComponent, TestChildComponent],
  providers: [],
  bootstrap: []
})

export class MainModule {

}

my as400screens.Module.ts

export const as400screensRoutes: Routes = [
  {path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent},
  {path: 'main-menu', component: MainMenuComponent},
  {path: 'inventory-management', component: InventoryManagementComponent},
  {path: 'items', component: ItemsComponent},
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forChild(as400screensRoutes)
  ],
  declarations: [
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent
  ],
  exports: [
    RouterModule,
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent],
  providers: [],
  bootstrap: []
})

export class As400screensModule {

}

my app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule, // default app routing module
    LoginModule,
    MainModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CommonModule,
    AngularWebStorageModule,
    NgbModule.forRoot(),
  ],
  exports: [],
  providers: [OLConfig, OLHttpService, OLUtils, OLAppService, OLAuthGuard, OLAuthGuardService, OLConstants],
  bootstrap: [AppComponent],
})

export class AppModule {
}

the problem for me is that i need to configure the as400screensRoutes in the as400screensModule, but in the app.routing.ts i already declares the routing for the all application. if i remove as400screensRoutes i will get the error 'router-outlet' is not a known element: from the MainComponent.ts. i tried to play with modules and import them in different places, but the only way to make it work was to declare as400screensRoutes in the as400screensModule with the already defined routes in the app.routing.ts.

is there a way to configure the routes only in app.routing.ts? maybe i'm over complicating things, so hope to get feedback that i'm configuring the routing the right way.

Answer 1

Import RouterModule to MainModule. Because you are using router-outlet in MainComponent that is a part of MainModule