Lazy-loaded routes with angular-cli

notes.md

Create the app:

ng new angular-cli-lazyload

cd angular-cli-lazyload

Create a module to be lazy loaded:

ng g module lazy

Rename the module directory to "+lazy". Prefixing lazy-loaded modules with "+" is a common practice.

mv src/app/lazy src/app/+lazy

Add a home component to be used as the default route:

ng g component home

Add a component that will be used as a lazy-loaded route:

ng g component +lazy/lazypage

Add app routes:

app/app.routes.ts

import { ModuleWithProviders }         from '@angular/core';
import { Routes, RouterModule }        from '@angular/router';
import { HomeComponent }               from './home/home.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'lazy', loadChildren: './+lazy/lazy.module#LazyModule' },
  { path: '**', redirectTo: '' }
];

export const appRoutingProviders: any[] = [
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Add HomeComponent and routing to app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routing, appRoutingProviders } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the routes to app.component.html:

<h1>
  {{title}}
</h1>

<p>Navigation:
  <a [routerLink]="['/']">Home</a>
  <a [routerLink]="['lazy/lazypage']">Lazy Page</a>
</p>

<h3>Current Route:</h3>

<router-outlet></router-outlet>

Add app/+lazy/lazy.routes.ts:

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';
import { LazypageComponent } from './lazypage/lazypage.component';

const lazyRoutes: Routes = [
  {
    path: '',
    component: LazyComponent,
    children: [
      {
        path: 'lazypage',
        component: LazypageComponent
      }
    ]
  }
];
export const lazyRouting: ModuleWithProviders = RouterModule.forChild(lazyRoutes);

Add routing and LazypageComponent to app/+lazy/lazy.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyComponent } from './lazy.component';
import { LazypageComponent } from './lazypage/lazypage.component';
import { lazyRouting } from './lazy.routes';

@NgModule({
  imports: [
    CommonModule,
    lazyRouting
  ],
  declarations: [LazyComponent, LazypageComponent]
})
export class LazyModule { }

Add router outlet to app/+lazy/lazy.component.html:

<h2>Lazy Module</h2>

<router-outlet></router-outlet>