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 --routing
ng 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.