Configuring an application to use lazy loading

Lazy loaded applications are those that defer the retrieval of relevant resources until they are actually necessary. Once applications begin to scale, this can yield meaningful gains in performance, and Angular 2 supports lazy loading right out of the box.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/0279/.

Getting ready

Suppose you begin with the following simple application:

[app/root.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'root', 
  template: ` 
    <h1>Root component</h1> 
    <router-outlet></router-outlet> 
  ` 
}) 
export class RootComponent {} 
[app/link.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'app-link', 
  template: ` 
    <a routerLink="/article">article</a> 
  ` 
}) 
export class LinkComponent...