docs(router): Added section for named outlets and secondary routes (#2842)

Author: brandonroberts

public/docs/_examples/router/e2e-spec.ts

@@ -28,21 +28,25 @@ describe('Router', function () {
 
       adminHref: hrefEles.get(2),
       adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
+      
       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')),
-
+      
+      contactHref: hrefEles.get(4),
+      contactCancelButton: element.all(by.buttonText('Cancel')),
+      
+      outletComponents: element.all(by.css('my-app > ng-component'))
     };
   }
 
   it('should be able to see the start screen', function () {
     let page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices');
+    expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices');
     expect(page.crisisHref.getText()).toEqual('Crisis Center');
     expect(page.heroesHref.getText()).toEqual('Heroes');
     expect(page.adminHref.getText()).toEqual('Admin');
     expect(page.loginHref.getText()).toEqual('Login');
+    expect(page.contactHref.getText()).toEqual('Contact');
   });
 
   it('should be able to see crises center items', function () {
@@ -120,12 +124,12 @@ describe('Router', function () {
     });
   });
 
-  it('should be able to handle 404 pages', function () {
+  it('should be able to see the secondary route', function () {
     let page = getPageStruct();
     page.heroesHref.click().then(function() {
-      return page.sidekicksButton.click();
+      return page.contactHref.click();
     }).then(function() {
-      expect(page.routerTitle.getText()).toContain('Page Not Found');
+      expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes');
     });
   });
 

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

@@ -1,11 +1,17 @@
 // #docplaster
-// #docregion
-import { NgModule }             from '@angular/core';
+// #docregion , v3
+import { NgModule }     from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { PageNotFoundComponent }from './not-found.component';
+import { ComposeMessageComponent } from './compose-message.component';
 
 const appRoutes: Routes = [
-  { path: '**', component: PageNotFoundComponent }
+// #enddocregion v3
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  }
+// #docregion v3
 ];
 
 @NgModule({

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

@@ -1,13 +1,17 @@
-// #docplaster
 // #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';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
 
 const appRoutes: Routes = [
-  { path: '**', component: PageNotFoundComponent }
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  }
 ];
 
 @NgModule({

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

@@ -4,15 +4,21 @@ import { NgModule }     from '@angular/core';
 // #docregion import-router
 import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
-import { PageNotFoundComponent }  from './not-found.component';
-import { CanDeactivateGuard }     from './can-deactivate-guard.service';
+
+import { ComposeMessageComponent } from './compose-message.component';
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
 // #docregion can-load-guard
-import { AuthGuard }          from './auth-guard.service';
+import { AuthGuard }               from './auth-guard.service';
 // #enddocregion can-load-guard
 
 // #docregion lazy-load-admin, can-load-guard
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',

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

@@ -8,11 +8,16 @@ import {
 // #docregion preload-v1
 } from '@angular/router';
 
-import { PageNotFoundComponent }  from './not-found.component';
-import { CanDeactivateGuard }     from './can-deactivate-guard.service';
-import { AuthGuard }              from './auth-guard.service';
+import { ComposeMessageComponent } from './compose-message.component';
+import { CanDeactivateGuard }      from './can-deactivate-guard.service';
+import { AuthGuard }               from './auth-guard.service';
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',

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

@@ -3,12 +3,17 @@
 import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-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';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { CanDeactivateGuard }       from './can-deactivate-guard.service';
+import { AuthGuard }                from './auth-guard.service';
+import { PreloadSelectedModules }   from './selective-preload-strategy';
 
 const appRoutes: Routes = [
+  {
+    path: 'compose',
+    component: ComposeMessageComponent,
+    outlet: 'modal'
+  },
   {
     path: 'admin',
     loadChildren: 'app/admin/admin.module#AdminModule',
@@ -26,10 +31,6 @@ const appRoutes: Routes = [
     data: {
       preload: true
     }
-  },
-  {
-    path: '**',
-    component: PageNotFoundComponent
   }
   // #enddocregion preload-v2
 ];

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

@@ -12,6 +12,9 @@ import { Component } from '@angular/core';
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
     </nav>
     <router-outlet></router-outlet>
+  // #enddocregion template
+    <router-outlet name="modal"></router-outlet>
+  // #enddocregion template    
   `
   // #enddocregion template
 })

public/docs/_examples/router/ts/app/app.component.ts

@@ -12,8 +12,10 @@ import { Component } from '@angular/core';
       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
       <a routerLink="/login" routerLinkActive="active">Login</a>
+      <a [routerLink]="[{ outlets: { modal: ['compose'] } }]">Contact</a>
     </nav>
     <router-outlet></router-outlet>
+    <router-outlet name="modal"></router-outlet>
   `
   // #enddocregion template
 })

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

@@ -5,19 +5,19 @@ import { NgModule }       from '@angular/core';
 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';
+import { AppComponent }            from './app.component';
+import { PageNotFoundComponent }   from './not-found.component';
+import { AppRoutingModule }        from './app-routing.module';
+import { HeroesModule }            from './heroes/heroes.module';
 // #docregion crisis-center-module
-import { CrisisCenterModule }     from './crisis-center/crisis-center.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
 // #enddocregion crisis-center-module
+import { ComposeMessageComponent } from './compose-message.component';
 // #docregion admin-module
-import { AdminModule }            from './admin/admin.module';
+import { AdminModule }             from './admin/admin.module';
 // #docregion crisis-center-module
 
-import { DialogService }          from './dialog.service';
+import { DialogService }           from './dialog.service';
 
 @NgModule({
   imports: [
@@ -26,13 +26,16 @@ import { DialogService }          from './dialog.service';
     HeroesModule,
     CrisisCenterModule,
 // #enddocregion crisis-center-module
+// #enddocregion admin-module
     AdminModule,
 // #docregion crisis-center-module
     AppRoutingModule
   ],
   declarations: [
     AppComponent,
-    PageNotFoundComponent
+// #enddocregion admin-module, crisis-center-module
+    ComposeMessageComponent
+// #docregion admin-module, crisis-center-module
   ],
   providers: [
     DialogService

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

@@ -1,21 +1,22 @@
+// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+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 { AppComponent }            from './app.component';
+import { AppRoutingModule }        from './app-routing.module';
 
-import { HeroesModule }        from './heroes/heroes.module';
-import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
-import { AdminModule }         from './admin/admin.module';
+import { HeroesModule }            from './heroes/heroes.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+import { ComposeMessageComponent } from './compose-message.component';
 
-import { DialogService }       from './dialog.service';
+import { AdminModule }             from './admin/admin.module';
+import { DialogService }           from './dialog.service';
 
 @NgModule({
   imports: [
-    BrowserModule,
+    CommonModule,
     FormsModule,
     HeroesModule,
     CrisisCenterModule,
@@ -24,7 +25,7 @@ import { DialogService }       from './dialog.service';
   ],
   declarations: [
     AppComponent,
-    PageNotFoundComponent
+    ComposeMessageComponent
   ],
   providers: [
     DialogService
@@ -33,3 +34,4 @@ import { DialogService }       from './dialog.service';
 })
 export class AppModule {
 }
+// #enddocregion

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

@@ -7,8 +7,10 @@ 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';
+import { HeroesModule }            from './heroes/heroes.module';
+import { CrisisCenterModule }      from './crisis-center/crisis-center.module';
+import { ComposeMessageComponent } from './compose-message.component';
+
 import { LoginRoutingModule }  from './login-routing.module';
 import { LoginComponent }       from './login.component';
 
@@ -25,7 +27,7 @@ import { DialogService }       from './dialog.service';
   ],
   declarations: [
     AppComponent,
-    PageNotFoundComponent,
+    ComposeMessageComponent,
     LoginComponent
   ],
   providers: [

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

@@ -7,9 +7,10 @@ import { AppComponent }         from './app.component';
 import { PageNotFoundComponent } from './not-found.component';
 import { AppRoutingModule }     from './app-routing.module';
 
-import { HeroesModule }         from './heroes/heroes.module';
-import { LoginRoutingModule }   from './login-routing.module';
-import { LoginComponent }       from './login.component';
+import { HeroesModule }             from './heroes/heroes.module';
+import { ComposeMessageComponent }  from './compose-message.component';
+import { LoginRoutingModule }       from './login-routing.module';
+import { LoginComponent }           from './login.component';
 
 import { DialogService }        from './dialog.service';
 
@@ -23,7 +24,7 @@ import { DialogService }        from './dialog.service';
   ],
   declarations: [
     AppComponent,
-    PageNotFoundComponent,
+    ComposeMessageComponent,
     LoginComponent
   ],
   providers: [