Angular2のloadChildrenでモジュールの遅延読み込みを行う

Angular2のloadChildrenを利用するとモジュールの遅延読み込みが可能になる。たまにしか読み込まれないモジュールなどは遅延読み込みの対象にしておこうapp.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
<a routerLink="/">TOP</a>
<a routerLink="/sub">Sub</a>
<router-outlet></router-outlet>
  `,
})
export class AppComponent  {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing'; 
  
@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [
  { path: 'sub', loadChildren: './app/sub/sub.module#SubModule' }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

sub.component.ts

import { Component } from '@angular/core';
  
@Component({
  template: `<h1>Sub</h1>`
})
export class SubComponent{}

import { NgModule } from '@angular/core';
import { SubRoutingModule } from './sub.routing';
import { SubComponent }   from './sub.component';
subComponent.ts
@NgModule({
  imports: [
    SubRoutingModule
  ],
  declarations: [SubComponent]
})
export class SubModule { }

sub.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SubComponent } from './sub.component';

const routes: Routes = [
  { path: '', component: SubComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SubRoutingModule { }