docs(router): Updated usage of observables in router tutorial and developer guide (#2696)

Moved route configuration into separate variable for consistency
Added async pipe to handle subscriptions for list items

public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }              from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -9,9 +9,7 @@ import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
 // #docregion admin-routes
-@NgModule({
+const adminRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: 'admin',
     component: AdminComponent,
@@ -26,7 +24,11 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }              from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,9 +11,7 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route, can-activate-child
 import { AuthGuard }                from '../auth-guard.service';
 
-@NgModule({
+const adminRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: 'admin',
     component: AdminComponent,
@@ -33,7 +31,11 @@ import { AuthGuard }                from '../auth-guard.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -12,9 +12,7 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 import { AuthGuard }                from '../auth-guard.service';
 
 // #docregion can-activate-child
-@NgModule({
+const adminRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: 'admin',
     component: AdminComponent,
@@ -31,7 +29,11 @@ import { AuthGuard }                from '../auth-guard.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/admin/admin-routing.module.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,9 +11,7 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route
 import { AuthGuard }                from '../auth-guard.service';
 
-@NgModule({
+const adminRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: '',
     component: AdminComponent,
@@ -30,7 +28,11 @@ import { AuthGuard }                from '../auth-guard.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.1.ts

@@ -1,17 +1,19 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
-@NgModule({
+const appRoutes: Routes = [
-  imports: [
-    RouterModule.forRoot([
   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'heroes', component: HeroListComponent }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.2.ts

@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
+    RouterModule.forRoot(appRoutes)
-      { path: 'crisis-center', component: CrisisListComponent },
-    ])
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.3.ts

@@ -1,13 +1,15 @@
 // #docplaster
 // #docregion
 import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+
+const appRoutes: Routes = [
+
+];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot([
+    RouterModule.forRoot(appRoutes)
-
-    ])
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.4.ts

@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 
+const appRoutes: Routes = [
+
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
+    RouterModule.forRoot(appRoutes)
-
-    ])
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.5.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { NgModule }     from '@angular/core';
 // #docregion import-router
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
@@ -11,17 +11,20 @@ import { AuthGuard }          from './auth-guard.service';
 // #enddocregion can-load-guard
 
 // #docregion lazy-load-admin, can-load-guard
-@NgModule({
+
-  imports: [
+const appRoutes: Routes = [
-    RouterModule.forRoot([
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
+// #enddocregion lazy-load-admin
     canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
+// #docregion lazy-load-admin
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app-routing.module.6.ts

@@ -2,7 +2,7 @@
 // #docregion, preload-v1
 import { NgModule }     from '@angular/core';
 import {
-  RouterModule,
+  RouterModule, Routes,
 // #enddocregion preload-v1
   PreloadAllModules
 // #docregion preload-v1
@@ -11,9 +11,7 @@ import {
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 
-@NgModule({
+const appRoutes: Routes = [
-  imports: [
-    RouterModule.forRoot([
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
@@ -27,10 +25,15 @@ import { AuthGuard }          from './auth-guard.service';
   {
     path: 'crisis-center',
     loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-      },
+  }
-    ],
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes
       // #enddocregion preload-v1
-    { preloadingStrategy: PreloadAllModules }
+      , { preloadingStrategy: PreloadAllModules }
       // #docregion preload-v1
     )
   ],

public/docs/_examples/router/ts/app/app-routing.module.ts

@@ -1,15 +1,13 @@
 // #docplaster
 // #docregion, preload-v1
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 import { PreloadSelectedModules } from './selective-preload-strategy';
 
-@NgModule({
+const appRoutes: Routes = [
-  imports: [
-    RouterModule.forRoot([
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
@@ -29,8 +27,14 @@ import { PreloadSelectedModules } from './selective-preload-strategy';
     }
   }
   // #enddocregion preload-v2
-    ],
+];
-    { preloadingStrategy: PreloadSelectedModules })
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      { preloadingStrategy: PreloadSelectedModules }
+    )
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/app.module.0.ts

@@ -4,7 +4,7 @@
 import { NgModule }             from '@angular/core';
 import { BrowserModule }        from '@angular/platform-browser';
 import { FormsModule }          from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent }           from './app.component';
 import { HeroListComponent }      from './hero-list.component';
@@ -14,11 +14,7 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon
 import { PageNotFoundComponent as HomeComponent } from './not-found.component';
 
 // #docregion route-config
-@NgModule({
+const appRoutes: Routes = [
-  imports: [
-    BrowserModule,
-    FormsModule,
-    RouterModule.forRoot([
   // #docregion route-defs
   // #docregion hero-detail-route
   { path: 'hero/:id', component: HeroDetailComponent },
@@ -34,7 +30,13 @@ import { PageNotFoundComponent as HomeComponent } from './not-found.component';
   { path: '', component: HomeComponent },
   // #enddocregion route-defs
   { path: '**', component: PageNotFoundComponent }
-    ])
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,

public/docs/_examples/router/ts/app/app.module.1.ts

@@ -4,7 +4,7 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }        from '@angular/platform-browser';
 import { FormsModule }          from '@angular/forms';
 // #docregion import-router, route-config
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router, route-config
 
 // #docregion router-basics
@@ -12,16 +12,18 @@ import { AppComponent }         from './app.component';
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+// #docregion route-config
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+// #enddocregion route-config
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    // #docregion route-config
+    RouterModule.forRoot(appRoutes)
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
-    // #enddocregion route-config
   ],
   declarations: [
     AppComponent,

public/docs/_examples/router/ts/app/app.routing.1.ts

@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion route-config
-import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-// #enddocregion
-
-// #docregion base-routes
-import { HeroListComponent }     from './hero-list.component';
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-import { HeroDetailComponent }   from './heroes/hero-detail.component';
-import { PageNotFoundComponent } from './not-found.component';
-import { PageNotFoundComponent as HomeComponent } from './not-found.component';
-// #enddocregion base-routes
-
-// #docregion
-// #docregion route-config
-const appRoutes: Routes = [
-  // #docregion route-defs
-  // #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent },
-  // #enddocregion hero-detail-route
-  { path: 'crisis-center', component: CrisisCenterComponent },
-  {
-    path: 'heroes',
-    component: HeroListComponent,
-    data: {
-      title: 'Heroes List'
-    }
-  },
-  { path: '', component: HomeComponent },
-  // #enddocregion route-defs
-  { path: '**', component: PageNotFoundComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config
-// #enddocregion

public/docs/_examples/router/ts/app/app.routing.2.ts

@@ -1,22 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders } from '@angular/core';
-// #docregion route-config
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
-
-// #docregion route-config
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config

public/docs/_examples/router/ts/app/app.routing.3.ts

@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisCenterComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

public/docs/_examples/router/ts/app/app.routing.4.ts

@@ -1,13 +0,0 @@
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-const appRoutes: Routes = [
-
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

public/docs/_examples/router/ts/app/app.routing.5.ts

@@ -1,16 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders }   from '@angular/core';
-// import { Routes, RouterModule }  from '@angular/router';
-//
-// import { loginRoutes,
-//          authProviders }      from './login.routing';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders
-// ];
-//
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

public/docs/_examples/router/ts/app/app.routing.6.ts

@@ -1,21 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders } from '@angular/core';
-// // #docregion import-router
-// import { Routes, RouterModule }   from '@angular/router';
-// // #enddocregion import-router
-//
-// import { loginRoutes,
-//          authProviders }  from './login.routing';
-//
-// import { CanDeactivateGuard } from './can-deactivate-guard.service';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders,
-//   CanDeactivateGuard
-// ];
-// 
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -9,9 +9,7 @@ import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
 // #docregion routes
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: 'crisis-center',
     component: CrisisCenterComponent,
@@ -32,7 +30,11 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion routes
 import { NgModule }             from '@angular/core';
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -18,10 +18,8 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 // #enddocregion crisis-detail-resolve
 // #docregion routes
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
+// #enddocregion routes
-    RouterModule.forChild([
-    // #enddocregion routes
   // #docregion redirect, routes
   {
     path: '',
@@ -61,7 +59,11 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
     ]
   }
   // #docregion routes
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -11,9 +11,7 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
 // #docregion can-deactivate-guard
 import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: '',
     redirectTo: '/crisis-center',
@@ -40,7 +38,11 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,9 +13,7 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   // #docregion redirect
   {
     path: '',
@@ -47,7 +45,11 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,9 +13,7 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
-    RouterModule.forChild([
   {
     path: '',
     component: CrisisCenterComponent,
@@ -40,7 +38,11 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
       }
     ]
   }
-    ])
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts

@@ -10,7 +10,7 @@ export class CrisisDetailResolve implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean {
-    let id = +route.params['id'];
+    let id = route.params['id'];
 
     return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit,
          HostBinding, trigger, transition,
          animate, style, state }          from '@angular/core';
@@ -12,9 +13,9 @@ import { DialogService }          from '../dialog.service';
   // #docregion template
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -74,14 +75,13 @@ export class CrisisDetailComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.route.params
-        let id = +params['id'];
+      .switchMap((params: Params) => this.service.getCrisis(params['id']))
-        this.service.getCrisis(id)
+      .subscribe((crisis: Crisis) => {
-          .then(crisis => {
         if (crisis) {
           this.editName = crisis.name;
           this.crisis = crisis;
@@ -89,7 +89,6 @@ export class CrisisDetailComponent implements OnInit {
           this.gotoCrises();
         }
       });
-      });
   }
   // #enddocregion ngOnInit
 

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -11,9 +11,9 @@ import { DialogService }  from '../dialog.service';
 @Component({
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -70,11 +70,12 @@ export class CrisisDetailComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
 // #docregion crisis-detail-resolve
   ngOnInit() {
-    this.route.data.forEach((data: { crisis: Crisis }) => {
+    this.route.data
+      .subscribe((data: { crisis: Crisis }) => {
         this.editName = data.crisis.name;
         this.crisis = data.crisis;
       });

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts

@@ -1,49 +1,45 @@
 // #docplaster
 // #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import 'rxjs/add/operator/do';
-import { ActivatedRoute, Router }       from '@angular/router';
+import 'rxjs/add/operator/switchMap';
+import { Component, OnInit }              from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Subscription }          from 'rxjs/Subscription';
+import { Observable }            from 'rxjs/Observable';
 
 @Component({
   // #docregion template
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
   `,
   // #enddocregion template
 })
-export class CrisisListComponent implements OnInit, OnDestroy {
+export class CrisisListComponent implements OnInit {
-  crises: Crisis[];
+  crises: Observable<Crisis[]>;
   selectedId: number;
-  private sub: Subscription;
 
   // #docregion relative-navigation-ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
-    private router: Router) {}
+    private router: Router
+  ) {}
   // #enddocregion relative-navigation-ctor
 
   ngOnInit() {
-    this.sub = this.route
+    this.crises = this.route.params
-      .params
+      .switchMap((params: Params) => {
-      .subscribe(params => {
         this.selectedId = +params['id'];
-        this.service.getCrises()
+        return this.service.getCrises();
-          .then(crises => this.crises = crises);
       });
   }
 
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
-
   // #docregion select
   onSelect(crisis: Crisis) {
     // Absolute link

public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts

@@ -1,17 +1,20 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router, Params } from '@angular/router';
 
+import { Observable }            from 'rxjs/Observable';
+
 import { Crisis, CrisisService } from './crisis.service';
 
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         [class.selected]="isSelected(crisis)"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
 
@@ -19,24 +22,24 @@ import { Crisis, CrisisService } from './crisis.service';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises: Crisis[];
+  crises: Observable<Crisis[]>;
-  public selectedId: number;
+  selectedId: number;
 
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
     private router: Router
-  ) { }
+  ) {}
 
   isSelected(crisis: Crisis) {
     return crisis.id === this.selectedId;
   }
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.crises = this.route.params
-      this.selectedId = params['id'];
+      .switchMap((params: Params) => {
-      this.service.getCrises()
+        this.selectedId = +params['id'];
-        .then(crises => this.crises = crises);
+        return this.service.getCrises();
       });
   }
 

public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts

@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 // #docregion imports
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -11,9 +14,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -37,14 +40,16 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.route.params
-      let id = +params['id']; // (+) converts string 'id' to a number
+      // (+) converts string 'id' to a number
-      this.service.getHero(id).then(hero => this.hero = hero);
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
-    });
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
   // #enddocregion gotoHeroes
 }

public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts

@@ -9,9 +9,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -28,15 +28,20 @@ export class HeroDetailComponent implements OnInit  {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
 
   // #docregion snapshot
   ngOnInit() {
     // (+) converts string 'id' to a number
     let id = +this.route.snapshot.params['id'];
-    this.service.getHero(id).then(hero => this.hero = hero);
+
+    this.service.getHero(id)
+      .then((hero: Hero) => this.hero = hero);
   }
   // #enddocregion snapshot
 
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
 }

public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts

@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #docregion rxjs-operator-import
 // #docregion route-animation-imports
 import { Component, OnInit, HostBinding,
          trigger, transition, animate,
@@ -14,9 +17,9 @@ import { Hero, HeroService }  from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -71,15 +74,16 @@ export class HeroDetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.route.params
-       let id = +params['id']; // (+) converts string 'id' to a number
+      // (+) converts string 'id' to a number
-       this.service.getHero(id).then(hero => this.hero = hero);
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
-     });
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 

public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts

@@ -11,25 +11,26 @@ import { Hero, HeroService }   from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Promise<Hero[]>;
 
   // #docregion ctor
   constructor(
     private router: Router,
-    private service: HeroService) { }
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   ngOnInit() {
-    this.service.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroes = this.service.getHeroes();
   }
 
   // #docregion select

public/docs/_examples/router/ts/app/heroes/hero-list.component.ts

@@ -1,6 +1,10 @@
 // #docplaster
 // #docregion
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
+// #docregion rxjs-imports
+import 'rxjs/add/operator/switchMap';
+import { Observable } from 'rxjs/Observable';
+// #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -13,19 +17,19 @@ import { Hero, HeroService }  from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         [class.selected]="isSelected(hero)"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
+// #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
 
-  // #docregion ctor
   private selectedId: number;
 
   constructor(
@@ -36,10 +40,10 @@ export class HeroListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.heroes = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getHeroes()
+        return this.service.getHeroes();
-          .then(heroes => this.heroes = heroes);
       });
   }
   // #enddocregion ctor
@@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit {
     this.router.navigate(['/hero', hero.id]);
   }
   // #enddocregion select
-
+// #docregion ctor
 }
 // #enddocregion

public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts

@@ -1,18 +1,20 @@
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { HeroListComponent }    from './hero-list.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
+const heroesRoutes: Routes = [
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
+    RouterModule.forChild(heroesRoutes)
-      { path: 'heroes',  component: HeroListComponent },
-    // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent }
-    // #enddocregion hero-detail-route
-    ])
   ],
   exports: [
     RouterModule

public/docs/_examples/router/ts/app/login-routing.module.ts

@@ -1,15 +1,17 @@
 // #docregion
 import { NgModule }             from '@angular/core';
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard }            from './auth-guard.service';
 import { AuthService }          from './auth.service';
 import { LoginComponent }       from './login.component';
 
+const loginRoutes: Routes = [
+  { path: 'login', component: LoginComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
+    RouterModule.forChild(loginRoutes)
-      { path: 'login', component: LoginComponent }
-    ])
   ],
   exports: [
     RouterModule

public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts

@@ -6,4 +6,3 @@ import { Component } from '@angular/core';
   template: '<h3>My Dashboard</h3>'
 })
 export class DashboardComponent { }
-

public/docs/_examples/toh-5/ts/app/hero-detail.component.ts

@@ -1,5 +1,7 @@
 // #docplaster
-// #docregion , v2
+// #docregion , v2, rxjs-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-import
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
+    this.route.params
-      let id = +params['id'];
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
-      this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
-        .then(hero => this.hero = hero);
-    });
   }
   // #enddocregion ngOnInit
 

public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

@@ -1,4 +1,5 @@
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
+    this.route.params
-      let id = +params['id'];
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
-      this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
-        .then(hero => this.hero = hero);
-    });
   }
 
   // #docregion save

public/docs/ts/latest/guide/router.jade

@@ -445,7 +445,7 @@ h4#define-routes Define routes
   :marked
     Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
     As our application grows, we'll want to refactor our routing configuration into a separate file
-    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
+    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated for the purpose
     of routing in feature modules.
 
 :marked
@@ -874,6 +874,11 @@ h3#activated-route ActivatedRoute: the one-stop-shop for route information
 
 +makeExcerpt('app/heroes/hero-detail.component.1.ts (activated route)', 'imports')
 
+:marked
+  We import the `switchMap` operator because we need it later to process the `Observable` route parameters.
+
++makeExcerpt('app/heroes/hero-detail.component.1.ts (switchMap operator import)', 'rxjs-operator-import')
+
 a#hero-detail-ctor
 :marked
   As usual, we write a constructor that asks Angular to inject services
@@ -882,13 +887,22 @@ a#hero-detail-ctor
 +makeExcerpt('app/heroes/hero-detail.component.ts (constructor)', 'ctor')
 
 :marked
-  Later, in the `ngOnInit` method,
+  Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters
-  we use the `ActivatedRoute` service to retrieve the parameters for our route.
+  for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to
-  Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and
+  provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`.
-  tell the `HeroService` to fetch the hero with that `id`.
 
 +makeExcerpt('app/heroes/hero-detail.component.ts (ngOnInit)', 'ngOnInit')
 
+.l-sub-section
+  :marked
+    The `switchMap` operator allows you to perform an action with the current value of the `Observable`,
+    and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles
+    an `Observable` as well as a `Promise` to retrieve the value they emit.
+
+    The `switchMap` operator will also cancel any in-flight requests if our user re-navigates to the route
+    while still retrieving a hero. Our `Observable` is _cold_ until subscribed to, so we use the `subscribe` method
+    to get and set our retrieved `Hero`.
+
 .l-sub-section
   :marked
     Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`.
@@ -1096,10 +1110,20 @@ code-example(language="bash").
 +makeExcerpt('app/heroes/hero-list.component.ts (import)', 'import-router')
 
 :marked
-  Then we use the `ActivatedRoute` to access the `params` _Observable_ so we can subscribe
+  We'll import the `switchMap` operator to perform an operation on our `Observable`
-  and extract the `id` parameter as the `selectedId`:
+  of route parameters.
 
-+makeExcerpt('app/heroes/hero-list.component.ts (constructor)', 'ctor')
++makeExcerpt('app/heroes/hero-list.component.ts (rxjs imports)', 'rxjs-imports')
+
+:marked
+  Then we inject the `ActivatedRoute` in the `HeroListComponent` constructor.
+
++makeExcerpt('app/heroes/hero-list.component.ts (constructor and ngOnInit)', 'ctor')
+
+:marked
+  The ActivatedRoute.params property is an Observable of route parameters. The params emits new id values
+  when the user navigates to the component. In ngOnInit we subscribe to those values, set the selectedId,
+  and get the heroes.
 
 .l-sub-section
   :marked

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -511,6 +511,11 @@ block route-params
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
+:marked
+  We'll also import the `switchMap` operator to use later with the route parameters `Observable`.
+
++makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+
 :marked
   We tell the class that we want to implement the `OnInit` interface.
 
@@ -526,14 +531,26 @@ block ngOnInit
 
 block extract-id
   :marked
-    Notice how we extract the `id` by calling the `forEach` method
+    Note how the `switchMap` operator maps the id in the observable route parameters
-    which will deliver our !{_array} of route parameters.
+    to a new `Observable`, the result of the `HeroService.getHero` method.
+
+    If the user re-navigates to this component while a getHero request is still inflight,
+    switchMap cancels that old request before calling `HeroService.getHero` again.
 
 - var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
 :marked
   The hero `id` is a number. Route parameters are *always strings*.
   So we convert the route parameter value to a number with the !{_str2int}.
 
+.l-sub-section
+  :marked
+    ### Do I need to unsubscribe?
+
+    The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+    the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+    memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+
+:marked
   ### Add *HeroService.getHero*
 
   The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
@@ -654,16 +671,16 @@ block extract-id
   +makeExample('app/app-routing.module.ts')
   :marked
     Noteworthy points, typical of _Routing Modules_:
-    * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+    * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
 
-    * Add `RouterModule.forRoot(routes)` to `imports`.
+    * Adds `RouterModule.forRoot(routes)` to `imports`.
 
-    * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+    * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
     such as `RouterLink` and `RouterOutlet`.
 
     * No `declarations`!  Declarations are the responsibility of the companion module.
 
-    * Add module `providers` for guard services if you have them; there are none in this example.
+    * Adds module `providers` for guard services if you have them; there are none in this example.
 
     ### Update _AppModule_