From 1afe5dc97d457e045adb6c0e03d27023aa97eea5 Mon Sep 17 00:00:00 2001
From: Brandon Roberts <robertsbt@gmail.com>
Date: Sat, 29 Oct 2016 16:08:54 -0500
Subject: [PATCH] docs(router): Updated usage of observables in router tutorial
 and developer guide

Moved route configuration into separate variable for consistency
Added async pipe to handle subscriptions for list items
---
 .../ts/app/admin/admin-routing.module.1.ts    | 34 ++++----
 .../ts/app/admin/admin-routing.module.2.ts    | 46 +++++------
 .../ts/app/admin/admin-routing.module.3.ts    | 38 ++++-----
 .../ts/app/admin/admin-routing.module.ts      | 36 +++++----
 .../router/ts/app/app-routing.module.1.ts     | 14 ++--
 .../router/ts/app/app-routing.module.2.ts     | 12 +--
 .../router/ts/app/app-routing.module.3.ts     | 10 ++-
 .../router/ts/app/app-routing.module.4.ts     | 12 +--
 .../router/ts/app/app-routing.module.5.ts     | 23 +++---
 .../router/ts/app/app-routing.module.6.ts     | 43 +++++-----
 .../router/ts/app/app-routing.module.ts       | 52 +++++++------
 .../_examples/router/ts/app/app.module.0.ts   | 44 ++++++-----
 .../_examples/router/ts/app/app.module.1.ts   | 22 +++---
 .../_examples/router/ts/app/app.routing.1.ts  | 44 -----------
 .../_examples/router/ts/app/app.routing.2.ts  | 22 ------
 .../_examples/router/ts/app/app.routing.3.ts  | 16 ----
 .../_examples/router/ts/app/app.routing.4.ts  | 13 ----
 .../_examples/router/ts/app/app.routing.5.ts  | 16 ----
 .../_examples/router/ts/app/app.routing.6.ts  | 21 -----
 .../crisis-center-routing.module.1.ts         | 40 +++++-----
 .../crisis-center-routing.module.2.ts         | 78 ++++++++++---------
 .../crisis-center-routing.module.3.ts         | 50 ++++++------
 .../crisis-center-routing.module.4.ts         | 60 +++++++-------
 .../crisis-center-routing.module.ts           | 46 +++++------
 .../crisis-detail-resolve.service.ts          |  2 +-
 .../crisis-detail.component.1.ts              | 27 ++++---
 .../crisis-center/crisis-detail.component.ts  | 15 ++--
 .../crisis-center/crisis-list.component.1.ts  | 32 ++++----
 .../crisis-center/crisis-list.component.ts    | 23 +++---
 .../ts/app/heroes/hero-detail.component.1.ts  | 19 +++--
 .../ts/app/heroes/hero-detail.component.2.ts  | 15 ++--
 .../ts/app/heroes/hero-detail.component.ts    | 18 +++--
 .../ts/app/heroes/hero-list.component.1.ts    | 11 +--
 .../ts/app/heroes/hero-list.component.ts      | 20 +++--
 .../ts/app/heroes/heroes-routing.module.ts    | 18 +++--
 .../router/ts/app/login-routing.module.ts     | 18 +++--
 .../toh-5/ts/app/dashboard.component.1.ts     |  1 -
 .../toh-5/ts/app/hero-detail.component.html   |  2 +-
 .../toh-5/ts/app/hero-detail.component.ts     | 12 +--
 .../toh-6/ts/app/hero-detail.component.ts     |  9 +--
 public/docs/ts/latest/guide/router.jade       | 48 +++++++++---
 public/docs/ts/latest/tutorial/toh-pt5.jade   | 29 +++++--
 42 files changed, 540 insertions(+), 571 deletions(-)
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.1.ts
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.2.ts
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.3.ts
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.4.ts
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.5.ts
 delete mode 100644 public/docs/_examples/router/ts/app/app.routing.6.ts

diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
index 0cb1d8f5c7..e7d83f113f 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
+++ b/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 { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -9,24 +9,26 @@ import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
 // #docregion admin-routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
+        path: '',
         children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
index 2087d7c913..dc3f28b5c4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
+++ b/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,29 +11,31 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route, can-activate-child
 import { AuthGuard }                from '../auth-guard.service';
 
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ],
+        // #enddocregion admin-route
+        // #docregion can-activate-child
+        canActivateChild: [AuthGuard]
+        // #docregion admin-route
+      }
+    ]
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
-        children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ],
-            // #enddocregion admin-route
-            // #docregion can-activate-child
-            canActivateChild: [AuthGuard]
-            // #docregion admin-route
-          }
-        ]
-      }
-    ])
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
index 92878febb2..63f1c9aaf4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -12,26 +12,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 import { AuthGuard }                from '../auth-guard.service';
 
 // #docregion can-activate-child
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        path: '',
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
index b83a75945b..a6ab988005 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,26 +11,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route
 import { AuthGuard }                from '../auth-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: '',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
         path: '',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.1.ts b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
index 8be1df9926..8b5f6983f5 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.1.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.2.ts b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
index eed5688574..53f0f24056 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.2.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.3.ts b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
index a30d061dc3..5e8a08e40a 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.3.ts
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.4.ts b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
index 2ce11b8105..7ea7cb11ed 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.4.ts
+++ b/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 { NgModule }             from '@angular/core';
+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
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.5.ts b/public/docs/_examples/router/ts/app/app-routing.module.5.ts
index 6e35f64f73..33505b532b 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.5.ts
+++ b/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
+
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+// #enddocregion lazy-load-admin
+    canLoad: [AuthGuard]
+// #docregion lazy-load-admin
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
-        canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
-      }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.6.ts b/public/docs/_examples/router/ts/app/app-routing.module.6.ts
index 68bcc30413..c9f1f2916c 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.6.ts
+++ b/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,27 +11,30 @@ import {
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-      },
-    ],
-    // #enddocregion preload-v1
-    { preloadingStrategy: PreloadAllModules }
-    // #docregion preload-v1
+    RouterModule.forRoot(
+      appRoutes
+      // #enddocregion preload-v1
+      , { preloadingStrategy: PreloadAllModules }
+      // #docregion preload-v1
     )
   ],
   exports: [
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts
index 8fa63edb1c..9cef4db94e 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.ts
@@ -1,36 +1,40 @@
 // #docplaster
 // #docregion, preload-v1
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+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';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  // #docregion preload-v2
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
+    data: {
+      preload: true
+    }
+  }
+  // #enddocregion preload-v2
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      // #docregion preload-v2
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
-        data: {
-          preload: true
-        }
-      }
-      // #enddocregion preload-v2
-    ],
-    { preloadingStrategy: PreloadSelectedModules })
+    RouterModule.forRoot(
+      appRoutes,
+      { preloadingStrategy: PreloadSelectedModules }
+    )
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app.module.0.ts b/public/docs/_examples/router/ts/app/app.module.0.ts
index df91982cd1..9844f30586 100644
--- a/public/docs/_examples/router/ts/app/app.module.0.ts
+++ b/public/docs/_examples/router/ts/app/app.module.0.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
 // #docregion router-basics
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent }           from './app.component';
 import { HeroListComponent }      from './hero-list.component';
@@ -14,27 +14,29 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon
 import { PageNotFoundComponent as HomeComponent } from './not-found.component';
 
 // #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: CrisisListComponent },
+  {
+    path: 'heroes',
+    component: HeroListComponent,
+    data: {
+      title: 'Heroes List'
+    }
+  },
+  { path: '', component: HomeComponent },
+  // #enddocregion route-defs
+  { path: '**', component: PageNotFoundComponent }
+];
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot([
-      // #docregion route-defs
-      // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent },
-      // #enddocregion hero-detail-route
-      { path: 'crisis-center', component: CrisisListComponent },
-      {
-        path: 'heroes',
-        component: HeroListComponent,
-        data: {
-          title: 'Heroes List'
-        }
-      },
-      { path: '', component: HomeComponent },
-      // #enddocregion route-defs
-      { path: '**', component: PageNotFoundComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
index 6338c9bca3..f98ef7528e 100644
--- a/public/docs/_examples/router/ts/app/app.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+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([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
-    // #enddocregion route-config
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.routing.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts
deleted file mode 100644
index 736f49b4fb..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.1.ts
+++ /dev/null
@@ -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
diff --git a/public/docs/_examples/router/ts/app/app.routing.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts
deleted file mode 100644
index 1115c9084e..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.2.ts
+++ /dev/null
@@ -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
diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts
deleted file mode 100644
index 247ec7f2dd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.3.ts
+++ /dev/null
@@ -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);
diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts
deleted file mode 100644
index ff04dd8bfd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.4.ts
+++ /dev/null
@@ -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);
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
deleted file mode 100644
index 8ce3e0a10f..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.5.ts
+++ /dev/null
@@ -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);
diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts
deleted file mode 100644
index 23e2897cf1..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.6.ts
+++ /dev/null
@@ -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);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
index 829175cea6..e646f467d1 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -9,30 +9,32 @@ import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
 // #docregion routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        path: '',
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
index 9c782edc0e..c3e3561dee 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -18,50 +18,52 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 // #enddocregion crisis-detail-resolve
 // #docregion routes
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-    // #enddocregion routes
-      // #docregion redirect, routes
+const crisisCenterRoutes: Routes = [
+// #enddocregion routes
+  // #docregion redirect, routes
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect, routes
+  // #docregion routes
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect, routes
-      // #docregion routes
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+  // #enddocregion routes
+            // #docregion can-deactivate-guard
+            canDeactivate: [CanDeactivateGuard],
+            // #enddocregion can-deactivate-guard
+            // #docregion crisis-detail-resolve
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+            // #enddocregion crisis-detail-resolve
+  // #docregion routes
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-      // #enddocregion routes
-                // #docregion can-deactivate-guard
-                canDeactivate: [CanDeactivateGuard],
-                // #enddocregion can-deactivate-guard
-                // #docregion crisis-detail-resolve
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-                // #enddocregion crisis-detail-resolve
-      // #docregion routes
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-      // #docregion routes
-    ])
+    ]
+  }
+  // #docregion routes
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
index 693a72f8c2..6d605dbe84 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -11,36 +11,38 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
 // #docregion can-deactivate-guard
 import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard]
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard]
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
index 17843ace3e..15b346d01f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,41 +13,43 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      // #docregion redirect
+const crisisCenterRoutes: Routes = [
+  // #docregion redirect
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
index e1d2ae1207..75ca2a7ee8 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
+++ b/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 { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,34 +13,36 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
index b4b92f30cc..25d2806e8f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
+++ b/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) {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
index 2a52513b6f..b314fb615f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
+++ b/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,21 +75,19 @@ export class CrisisDetailComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-        let id = +params['id'];
-        this.service.getCrisis(id)
-          .then(crisis => {
-            if (crisis) {
-              this.editName = crisis.name;
-              this.crisis = crisis;
-            } else { // id not found
-              this.gotoCrises();
-            }
-          });
+    this.route.params
+      .switchMap((params: Params) => this.service.getCrisis(params['id']))
+      .subscribe((crisis: Crisis) => {
+        if (crisis) {
+          this.editName = crisis.name;
+          this.crisis = crisis;
+        } else { // id not found
+          this.gotoCrises();
+        }
       });
   }
   // #enddocregion ngOnInit
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
index cda3b7dc6a..d121242a13 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
+++ b/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,14 +70,15 @@ 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.editName = data.crisis.name;
-      this.crisis = data.crisis;
-    });
+    this.route.data
+      .subscribe((data: { crisis: Crisis }) => {
+        this.editName = data.crisis.name;
+        this.crisis = data.crisis;
+      });
   }
 // #enddocregion crisis-detail-resolve
 
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
index 80fa3483cd..53b9773212 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
+++ b/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 { ActivatedRoute, Router }       from '@angular/router';
+import 'rxjs/add/operator/do';
+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 {
-  crises: Crisis[];
+export class CrisisListComponent implements OnInit {
+  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
-      .params
-      .subscribe(params => {
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getCrises()
-          .then(crises => this.crises = crises);
+        return this.service.getCrises();
       });
   }
 
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
-
   // #docregion select
   onSelect(crisis: Crisis) {
     // Absolute link
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
index 350867adbc..2b52f43f57 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
+++ b/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,25 +22,25 @@ import { Crisis, CrisisService } from './crisis.service';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises: Crisis[];
-  public selectedId: number;
+  crises: Observable<Crisis[]>;
+  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.selectedId = params['id'];
-      this.service.getCrises()
-        .then(crises => this.crises = crises);
-    });
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
+        this.selectedId = +params['id'];
+        return this.service.getCrises();
+      });
   }
 
   // #docregion relative-navigation
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
index 90d0510bd7..93f0efaf0b 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
+++ b/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) => {
-      let id = +params['id']; // (+) converts string 'id' to a number
-      this.service.getHero(id).then(hero => this.hero = hero);
-    });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .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
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
index 07b876c79f..c3b69be965 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
+++ b/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']);
+  }
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
index 42adbe2d98..c528651f44 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
+++ b/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) => {
-       let id = +params['id']; // (+) converts string 'id' to a number
-       this.service.getHero(id).then(hero => this.hero = hero);
-     });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
index 0b7298009c..878fef4694 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
index 068c9680d0..ff0378a836 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
+++ b/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()
-          .then(heroes => this.heroes = heroes);
+        return this.service.getHeroes();
       });
   }
   // #enddocregion ctor
@@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit {
     this.router.navigate(['/hero', hero.id]);
   }
   // #enddocregion select
-
+// #docregion ctor
 }
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
index 96bf339394..dbee521793 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
+++ b/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 { NgModule }             from '@angular/core';
+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([
-      { path: 'heroes',  component: HeroListComponent },
-    // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent }
-    // #enddocregion hero-detail-route
-    ])
+    RouterModule.forChild(heroesRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/login-routing.module.ts b/public/docs/_examples/router/ts/app/login-routing.module.ts
index 43c0e28a97..96d05e7972 100644
--- a/public/docs/_examples/router/ts/app/login-routing.module.ts
+++ b/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 { AuthGuard }      from './auth-guard.service';
-import { AuthService }    from './auth.service';
-import { LoginComponent } from './login.component';
+import { NgModule }             from '@angular/core';
+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([
-      { path: 'login', component: LoginComponent }
-    ])
+    RouterModule.forChild(loginRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
index 430a30ebbe..3c92b205c8 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
+++ b/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 { }
-
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
index cf96fc2169..8f2ff9d90c 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
@@ -11,4 +11,4 @@
   <!-- #docregion back-button -->
   <button (click)="goBack()">Back</button>
   <!-- #enddocregion back-button -->
-</div>
\ No newline at end of file
+</div>
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 3ca01d2361..3557aa31d5 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/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) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 001b34baf7..a0342415f2 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/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) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
 
   // #docregion save
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index ce19d50a03..16a67cac35 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/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,
-  we use the `ActivatedRoute` service to retrieve the parameters for our route.
-  Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and
-  tell the `HeroService` to fetch the hero with that `id`.
+  Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters
+  for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to
+  provide them for the `id` parameter by name and 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
-  and extract the `id` parameter as the `selectedId`:
+  We'll import the `switchMap` operator to perform an operation on our `Observable`
+  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
@@ -2150,7 +2174,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 
   The *Router* also supports [custom preloading strategies](#custom-preloading) for fine control over which modules to pre-load.
 
-  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy 
+  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy
   to load _all_ lazy loaded modules as soon as possible.
 
 <a id="preload-canload"></a>
@@ -2183,9 +2207,9 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
   `)
 
 :marked
-  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options. 
+  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
   We import the `PreloadAllModules` token from the router package and set the configuration option's `preloadingStrategy` property
-  with this `PreloadAllModules` token. 
+  with this `PreloadAllModules` token.
   This tells the built-in *Router* pre-loader to immediately load **all** [unguarded](#preload-canload) feature areas that use `loadChildren`.
 
 +makeExcerpt('app/app-routing.module.6.ts (preload all)', '')
@@ -2207,7 +2231,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
   Since we want to take advantage of this, we'll add a custom strategy that _only_ preloads the modules we select. We'll enable the preloading by using the *Route Data*,
   which, as we learned, is an object to store arbitrary route data and and [resolve data](#resolve-guard).
 
-  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add 
+  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add
   the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message
   to the console for the preloaded module.
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index e237165347..584ec4b37b 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/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
-    which will deliver our !{_array} of route parameters.
+    Note how the `switchMap` operator maps the id in the observable 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_