docs(router): Updated usage of observables in tutorial and dev guide

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

@@ -1,32 +1,34 @@
 // #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';
 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

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';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        path: '',
         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
-          }
-        ]
+          { 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(adminRoutes)
   ],
   exports: [
     RouterModule

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

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { 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

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

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

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

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

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

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

@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { 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

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