Multiple modules and routing in angular 5

Edit 08/2019

Adapted the lazy load module syntax to the newly, strong-typed syntax introduced in angular 8.

Edit 10/2021:

This construct is still valid for Angular 12.

Solution

Here is how I do it:

app.module.ts

import {ModuleRouting} from './app.routing';@NgModule({    declarations: [        AppComponent,    ],    imports: [        ModuleRouting,        SubmoduleModule             ]    bootstrap: [AppComponent]})export class AppModule {}

app.routing.ts

import {Routes, RouterModule} from '@angular/router';import {ModuleWithProviders} from '@angular/core';const routes: Routes = [    {path: 'submodule', loadChildren: () => import('app/submodule/submodule.module').then(m => m.SubmoduleModule)}];export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

submodule.module.ts

import {NgModule} from '@angular/core';import {CommonModule} from '@angular/common';import {SubmoduleRouting} from './submodule.routing';@NgModule({    imports: [        CommonModule,        SubmoduleRouting    ],    declarations: [        //...    ]})export class SubmoduleModule {}

submodule.routing.ts

import {RouterModule, Routes} from '@angular/router';import {ModuleWithProviders} from '@angular/core';const routes: Routes = [    {        path: '',        component: SomeComponent,    },    {        path: 'other',        component: SomeOtherComponent,    }];export const SubmoduleRouting: ModuleWithProviders = RouterModule.forChild(routes);

You can also generate the module and routing files using the angular cli and then adapt them:(cd to the directory where the files should be created before every command)

ng g m module --routingng g m submodule --routing

app.routing.module.ts

const routes: Routes = [  {    path: '',    children: [      { path: 'courses', loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' }    ]  }];

courses.routing.module.ts

const routes: Routes = [  {    path: '',    children: [      { path: 'list', component: CoursesListComponent}    }  }];

I would do it this way. Give it a try yourself and see how it goes.