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 { 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,24 +9,26 @@ 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,
+    children: [
       {
-        path: 'admin',
+        path: '',
-        component: AdminComponent,
         children: [
-          {
+          { path: 'crises', component: ManageCrisesComponent },
-            path: '',
+          { path: 'heroes', component: ManageHeroesComponent },
-            children: [
+          { path: '', component: AdminDashboardComponent }
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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,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([
+    RouterModule.forChild(adminRoutes)
-      {
-        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
-          }
-        ]
-      }
-    ])
   ],
   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 { 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,26 +12,28 @@ 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,
+    canActivate: [AuthGuard],
+    children: [
       {
-        path: 'admin',
+        path: '',
-        component: AdminComponent,
+        canActivateChild: [AuthGuard],
-        canActivate: [AuthGuard],
         children: [
-          {
+          { path: 'crises', component: ManageCrisesComponent },
-            path: '',
+          { path: 'heroes', component: ManageHeroesComponent },
-            canActivateChild: [AuthGuard],
+          { path: '', component: AdminDashboardComponent }
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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 { 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,26 +11,28 @@ 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,
+    canActivate: [AuthGuard],
+    children: [
       {
         path: '',
-        component: AdminComponent,
+        canActivateChild: [AuthGuard],
-        canActivate: [AuthGuard],
         children: [
-          {
+          { path: 'crises', component: ManageCrisesComponent },
-            path: '',
+          { path: 'heroes', component: ManageHeroesComponent },
-            canActivateChild: [AuthGuard],
+          { path: '', component: AdminDashboardComponent }
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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 { 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';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
+    RouterModule.forRoot(appRoutes)
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
   ],
   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 { 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 { 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
+
+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([
+    RouterModule.forRoot(appRoutes)
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
-        canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
-      }
-    ])
   ],
   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,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([
+    RouterModule.forRoot(
-      {
+      appRoutes
-        path: 'admin',
+      // #enddocregion preload-v1
-        loadChildren: 'app/admin/admin.module#AdminModule',
+      , { preloadingStrategy: PreloadAllModules }
-        canLoad: [AuthGuard]
+      // #docregion preload-v1
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-      },
-    ],
-    // #enddocregion preload-v1
-    { preloadingStrategy: PreloadAllModules }
-    // #docregion preload-v1
     )
   ],
   exports: [

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

@@ -1,36 +1,40 @@
 // #docplaster
 // #docregion, preload-v1
-import { NgModule }     from '@angular/core';
+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';
 
+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([
+    RouterModule.forRoot(
-      {
+      appRoutes,
-        path: 'admin',
+      { preloadingStrategy: PreloadSelectedModules }
-        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 })
   ],
   exports: [
     RouterModule

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 { NgModule }             from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { BrowserModule }        from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+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,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([
+    RouterModule.forRoot(appRoutes)
-      // #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 }
-    ])
   ],
   declarations: [
     AppComponent,

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

@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
-import { NgModule }       from '@angular/core';
+import { NgModule }             from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { BrowserModule }        from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+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 { 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,30 +9,32 @@ 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,
+    children: [
       {
-        path: 'crisis-center',
+        path: '',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent
+          },
           {
             path: '',
-            component: CrisisListComponent,
+            component: CrisisCenterHomeComponent
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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 { 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,50 +18,52 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 // #enddocregion crisis-detail-resolve
 // #docregion routes
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
+// #enddocregion routes
-    RouterModule.forChild([
+  // #docregion redirect, 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',
+        component: CrisisListComponent,
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect, routes
-      // #docregion routes
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
         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,
+            component: CrisisCenterHomeComponent
-            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
-              }
-            ]
           }
         ]
       }
-      // #docregion routes
+    ]
-    ])
+  }
+  // #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 { 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,36 +11,38 @@ 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',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
+        component: CrisisListComponent,
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard]
+          },
           {
             path: '',
-            component: CrisisListComponent,
+            component: CrisisCenterHomeComponent
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard]
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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 { 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,41 +13,43 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
+const crisisCenterRoutes: Routes = [
-  imports: [
+  // #docregion redirect
-    RouterModule.forChild([
+  {
-      // #docregion redirect
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
+        component: CrisisListComponent,
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
+            component: CrisisCenterHomeComponent
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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 { 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,34 +13,36 @@ 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,
+    children: [
       {
         path: '',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
+            component: CrisisCenterHomeComponent
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@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,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) => {
+    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) {
-            if (crisis) {
+          this.editName = crisis.name;
-              this.editName = crisis.name;
+          this.crisis = crisis;
-              this.crisis = crisis;
+        } else { // id not found
-            } else { // id not found
+          this.gotoCrises();
-              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,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.route.data
-      this.editName = data.crisis.name;
+      .subscribe((data: { crisis: Crisis }) => {
-      this.crisis = data.crisis;
+        this.editName = data.crisis.name;
-    });
+        this.crisis = data.crisis;
+      });
   }
 // #enddocregion crisis-detail-resolve
 

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,25 +22,25 @@ 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();
-    });
+      });
   }
 
   // #docregion relative-navigation

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 { 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 { NgModule }             from '@angular/core';
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard }      from './auth-guard.service';
+import { AuthGuard }            from './auth-guard.service';
-import { AuthService }    from './auth.service';
+import { AuthService }          from './auth.service';
-import { LoginComponent } from './login.component';
+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.html

@@ -11,4 +11,4 @@
   <!-- #docregion back-button -->
   <button (click)="goBack()">Back</button>
   <!-- #enddocregion back-button -->
-</div>
+</div>

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
@@ -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.
 

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_