docs(router): Added wildcard route to live example (#2897)

brandonroberts · wardbell · commit a74f8fb3b1ce · 2016-12-20T13:35:06.000-08:00
diff --git a/public/docs/_examples/router/e2e-spec.ts b/public/docs/_examples/router/e2e-spec.ts
@@ -31,6 +31,8 @@ describe('Router', function () {
       loginHref: hrefEles.get(3),
       loginButton: element.all(by.css('my-app > ng-component > p > button')),
 
+      sidekicksButton: element.all(by.css('my-app > ng-component > button')),
+
     };
   }
 
@@ -118,6 +120,15 @@ describe('Router', function () {
     });
   });
 
+  it('should be able to handle 404 pages', function () {
+    let page = getPageStruct();
+    page.heroesHref.click().then(function() {
+      return page.sidekicksButton.click();
+    }).then(function() {
+      expect(page.routerTitle.getText()).toContain('Page Not Found');
+    });
+  });
+
   function crisisCenterEdit(index: number, shouldSave: boolean) {
     let page = getPageStruct();
     let crisisEle: ElementFinder;
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
@@ -5,10 +5,12 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
+import { PageNotFoundComponent }from './not-found.component';
 
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent }
+  { path: 'heroes', component: HeroListComponent },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
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
@@ -4,9 +4,11 @@ import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
+import { PageNotFoundComponent }from './not-found.component';
 
 const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisListComponent }
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
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
@@ -1,10 +1,11 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
+import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent }from './not-found.component';
 
 const appRoutes: Routes = [
-
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
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
@@ -2,11 +2,12 @@
 // #docregion
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent }from './not-found.component';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 
 const appRoutes: Routes = [
-
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
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
@@ -4,8 +4,8 @@ import { NgModule }     from '@angular/core';
 // #docregion import-router
 import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
+import { PageNotFoundComponent }  from './not-found.component';
+import { CanDeactivateGuard }     from './can-deactivate-guard.service';
 // #docregion can-load-guard
 import { AuthGuard }          from './auth-guard.service';
 // #enddocregion can-load-guard
@@ -19,7 +19,8 @@ const appRoutes: Routes = [
 // #enddocregion lazy-load-admin
     canLoad: [AuthGuard]
 // #docregion lazy-load-admin
-  }
+  },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
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
@@ -8,8 +8,9 @@ import {
 // #docregion preload-v1
 } from '@angular/router';
 
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard }          from './auth-guard.service';
+import { PageNotFoundComponent }  from './not-found.component';
+import { CanDeactivateGuard }     from './can-deactivate-guard.service';
+import { AuthGuard }              from './auth-guard.service';
 
 const appRoutes: Routes = [
   {
@@ -25,7 +26,8 @@ const appRoutes: Routes = [
   {
     path: 'crisis-center',
     loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-  }
+  },
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts
@@ -3,8 +3,9 @@
 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 { PageNotFoundComponent }  from './not-found.component';
+import { CanDeactivateGuard }     from './can-deactivate-guard.service';
+import { AuthGuard }              from './auth-guard.service';
 import { PreloadSelectedModules } from './selective-preload-strategy';
 
 const appRoutes: Routes = [
@@ -25,6 +26,10 @@ const appRoutes: Routes = [
     data: {
       preload: true
     }
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent
   }
   // #enddocregion preload-v2
 ];
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -1,23 +1,27 @@
 // #docplaster
 // #docregion
+// #docregion first-config
 import { NgModule }             from '@angular/core';
 import { BrowserModule }        from '@angular/platform-browser';
 import { FormsModule }          from '@angular/forms';
-// #docregion import-router, route-config
+// #docregion import-router
 import { RouterModule, Routes } from '@angular/router';
-// #enddocregion import-router, route-config
+// #enddocregion import-router
 
-// #docregion router-basics
 import { AppComponent }         from './app.component';
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
+// #enddocregion first-config
+import { PageNotFoundComponent }from './not-found.component';
+// #docregion first-config
 
-// #docregion route-config
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent }
+  { path: 'heroes', component: HeroListComponent },
+// #enddocregion first-config
+  { path: '**', component: PageNotFoundComponent }
+// #docregion first-config
 ];
-// #enddocregion route-config
 
 @NgModule({
   imports: [
@@ -28,11 +32,13 @@ const appRoutes: Routes = [
   declarations: [
     AppComponent,
     HeroListComponent,
-    CrisisListComponent
+    CrisisListComponent,
+// #enddocregion first-config
+    PageNotFoundComponent
+// #docregion first-config
   ],
   bootstrap: [ AppComponent ]
 })
-// #enddocregion router-basics
 export class AppModule {
 }
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.2.ts b/public/docs/_examples/router/ts/app/app.module.2.ts
@@ -10,6 +10,7 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
+import { PageNotFoundComponent }from './not-found.component';
 
 @NgModule({
   imports: [
@@ -20,7 +21,8 @@ import { HeroListComponent }    from './hero-list.component';
   declarations: [
     AppComponent,
     HeroListComponent,
-    CrisisListComponent
+    CrisisListComponent,
+    PageNotFoundComponent
   ],
   bootstrap: [ AppComponent ]
 })
diff --git a/public/docs/_examples/router/ts/app/app.module.3.ts b/public/docs/_examples/router/ts/app/app.module.3.ts
@@ -10,7 +10,8 @@ import { AppRoutingModule }  from './app-routing.module';
 
 import { HeroesModule }         from './heroes/heroes.module';
 
-import { CrisisListComponent }  from './crisis-list.component';
+import { CrisisListComponent }    from './crisis-list.component';
+import { PageNotFoundComponent }  from './not-found.component';
 
 @NgModule({
   imports: [
@@ -21,7 +22,8 @@ import { CrisisListComponent }  from './crisis-list.component';
   ],
   declarations: [
     AppComponent,
-    CrisisListComponent
+    CrisisListComponent,
+    PageNotFoundComponent
   ],
   bootstrap: [ AppComponent ]
 })
diff --git a/public/docs/_examples/router/ts/app/app.module.4.ts b/public/docs/_examples/router/ts/app/app.module.4.ts
@@ -6,6 +6,7 @@ import { CommonModule }   from '@angular/common';
 import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
+import { PageNotFoundComponent }from './not-found.component';
 import { AppRoutingModule }     from './app-routing.module';
 
 import { HeroesModule }           from './heroes/heroes.module';
@@ -30,7 +31,8 @@ import { DialogService }          from './dialog.service';
     AppRoutingModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
diff --git a/public/docs/_examples/router/ts/app/app.module.5.ts b/public/docs/_examples/router/ts/app/app.module.5.ts
@@ -3,8 +3,9 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }        from './app.component';
-import { AppRoutingModule }    from './app-routing.module';
+import { AppComponent }         from './app.component';
+import { PageNotFoundComponent }from './not-found.component';
+import { AppRoutingModule }     from './app-routing.module';
 
 import { HeroesModule }        from './heroes/heroes.module';
 import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
@@ -22,7 +23,8 @@ import { DialogService }       from './dialog.service';
     AppRoutingModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    PageNotFoundComponent
   ],
   providers: [
     DialogService
diff --git a/public/docs/_examples/router/ts/app/app.module.7.ts b/public/docs/_examples/router/ts/app/app.module.7.ts
@@ -3,8 +3,9 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }        from './app.component';
-import { AppRoutingModule }    from './app-routing.module';
+import { AppComponent }         from './app.component';
+import { PageNotFoundComponent }from './not-found.component';
+import { AppRoutingModule }     from './app-routing.module';
 
 import { HeroesModule }        from './heroes/heroes.module';
 import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
@@ -24,6 +25,7 @@ import { DialogService }       from './dialog.service';
   ],
   declarations: [
     AppComponent,
+    PageNotFoundComponent,
     LoginComponent
   ],
   providers: [
diff --git a/public/docs/_examples/router/ts/app/app.module.ts b/public/docs/_examples/router/ts/app/app.module.ts
@@ -4,6 +4,7 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
+import { PageNotFoundComponent } from './not-found.component';
 import { AppRoutingModule }     from './app-routing.module';
 
 import { HeroesModule }         from './heroes/heroes.module';
@@ -22,6 +23,7 @@ import { DialogService }        from './dialog.service';
   ],
   declarations: [
     AppComponent,
+    PageNotFoundComponent,
     LoginComponent
   ],
   providers: [
diff --git a/public/docs/_examples/router/ts/app/hero-list.component.ts b/public/docs/_examples/router/ts/app/hero-list.component.ts
@@ -5,6 +5,9 @@ import { Component } from '@angular/core';
 @Component({
   template: `
     <h2>HEROES</h2>
-    <p>Get your heroes here</p>`
+    <p>Get your heroes here</p>
+
+    <button routerLink="/sidekicks">Go To Sidekicks</button>
+  `
 })
 export class HeroListComponent { }
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
@@ -16,6 +16,8 @@ import { Hero, HeroService }   from './hero.service';
         <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
+
+    <button routerLink="/sidekicks">Go To Sidekicks</button>
   `
   // #enddocregion template
 })
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
@@ -23,6 +23,8 @@ import { Hero, HeroService }  from './hero.service';
         <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
+
+    <button routerLink="/sidekicks">Go To Sidekicks</button>
   `
   // #enddocregion template
 })
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
