|  |  | ### Lazy Loaded Routes/Modules (Angular 2.4.4, Angular CLI 1.0.0-beta.26) | 
|  |  | ```javascript | 
|  |  | // app/home/home.module.ts | 
|  |  | import { NgModule } from '@angular/core'; | 
|  |  | import { CommonModule } from '@angular/common'; | 
|  |  | import { RouterModule, Routes } from '@angular/router'; | 
|  |  | import { HomeComponent } from './home.component'; | 
|  |  |  | 
|  |  | const routes: Routes = [ | 
|  |  | { | 
|  |  | path: '', | 
|  |  | component: HomeComponent, | 
|  |  | }, | 
|  |  | ]; | 
|  |  |  | 
|  |  | @NgModule({ | 
|  |  | imports: [ | 
|  |  | CommonModule, | 
|  |  | RouterModule.forChild(routes), | 
|  |  | ], | 
|  |  | exports: [ HomeComponent ], | 
|  |  | declarations: [ HomeComponent ], | 
|  |  | }) | 
|  |  | export class HomeModule { } | 
|  |  | ``` | 
|  |  | ```javascript | 
|  |  | // app/app-routing.module.ts | 
|  |  | import { NgModule } from '@angular/core'; | 
|  |  | import { RouterModule, Routes } from '@angular/router'; | 
|  |  |  | 
|  |  | const routes: Routes = [ | 
|  |  | { | 
|  |  | path: '', | 
|  |  | loadChildren: './home/home.module#HomeModule', | 
|  |  | }, | 
|  |  | ]; | 
|  |  |  | 
|  |  | @NgModule({ | 
|  |  | imports: [ RouterModule.forRoot(routes) ], | 
|  |  | exports: [ RouterModule ] | 
|  |  | }) | 
|  |  | export class AppRoutingModule {} | 
|  |  | ``` | 
|  |  |  | 
|  |  |  | 
|  |  | ## Method of adding modules in the main app-routing.module.ts | 
|  |  | ```javascript | 
|  |  | import { NgModule }             from '@angular/core'; | 
|  |  | import { RouterModule, Routes } from '@angular/router'; | 
|  |  |  | 
|  |  | // import { CanActivateViaAuthGuard } from './services'; | 
|  |  | import { ErrorComponent } from './error/error.component'; | 
|  |  |  | 
|  |  |  | 
|  |  | const routes: Routes = [ | 
|  |  | { | 
|  |  | path: '', | 
|  |  | loadChildren: 'app/home/home.module#HomeModule', | 
|  |  | // canActivate: [ CanActivateViaAuthGuard ],  // auth protection | 
|  |  | }, | 
|  |  | { | 
|  |  | path: 'login', | 
|  |  | loadChildren: 'app/login/login.module#LoginModule', | 
|  |  | }, | 
|  |  | { | 
|  |  | path: 'careers', | 
|  |  | loadChildren: 'app/careers/careers.module#CareersModule', | 
|  |  | }, | 
|  |  | { | 
|  |  | path: 'contact', | 
|  |  | loadChildren: 'app/contact/contact.module#ContactModule', | 
|  |  | }, | 
|  |  | { | 
|  |  | path: 'press', | 
|  |  | loadChildren: 'app/press/press.module#PressModule', | 
|  |  | }, | 
|  |  | { | 
|  |  | path: 'team', | 
|  |  | loadChildren: 'app/team/team.module#TeamModule', | 
|  |  | }, | 
|  |  | { | 
|  |  | path: '**', | 
|  |  | component: ErrorComponent, | 
|  |  | data: { title: 'Page Not Found'},  // because title str should differ from path str | 
|  |  | }, | 
|  |  | ]; | 
|  |  |  | 
|  |  |  | 
|  |  | @NgModule({ | 
|  |  | imports: [ RouterModule.forRoot(routes) ], | 
|  |  | exports: [ RouterModule ] | 
|  |  | }) | 
|  |  | export class AppRoutingModule {} | 
|  |  |  | 
|  |  | ``` |