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>