docs(router): Added example of feature module pre-loading

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

@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 
@@ -27,7 +27,10 @@ describe('Router', function () {
       heroDetailTitle: element(by.css('my-app > ng-component > div > h3')),
 
       adminHref: hrefEles.get(2),
-      loginHref: hrefEles.get(3)
+      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')),
+
     };
   }
 
@@ -105,6 +108,16 @@ describe('Router', function () {
     });
   });
 
+  it('should be able to see the preloaded modules', function () {
+    let page = getPageStruct();
+    page.loginHref.click().then(function() {
+      return page.loginButton.click();
+    }).then(function() {
+      expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module');
+      expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center');
+    });
+  });
+
   function crisisCenterEdit(index: number, shouldSave: boolean) {
     let page = getPageStruct();
     let crisisEle: ElementFinder;

public/docs/_examples/router/ts/app/admin/admin-dashboard.component.2.ts

@@ -0,0 +1,33 @@
+// #docregion
+import { Component, OnInit }  from '@angular/core';
+import { ActivatedRoute }     from '@angular/router';
+import { Observable }         from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+@Component({
+  template:  `
+    <p>Dashboard</p>
+
+    <p>Session ID: {{ sessionId | async }}</p>
+    <a id="anchor"></a>
+    <p>Token: {{ token | async }}</p>
+  `
+})
+export class AdminDashboardComponent implements OnInit {
+  sessionId: Observable<string>;
+  token: Observable<string>;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    // Capture the session ID if available
+    this.sessionId = this.route
+      .queryParams
+      .map(params => params['session_id'] || 'None');
+
+    // Capture the fragment if available
+    this.token = this.route
+      .fragment
+      .map(fragment => fragment || 'None');
+  }
+}

public/docs/_examples/router/ts/app/admin/admin-dashboard.component.ts

@@ -1,7 +1,9 @@
 // #docregion
-import { Component, OnInit }  from '@angular/core';
-import { ActivatedRoute }     from '@angular/router';
-import { Observable }         from 'rxjs/Observable';
+import { Component, OnInit }    from '@angular/core';
+import { ActivatedRoute }       from '@angular/router';
+import { Observable }           from 'rxjs/Observable';
+import { PreloadSelectedModules } from '../selective-preload-strategy';
+
 import 'rxjs/add/operator/map';
 
 @Component({
@@ -11,13 +13,24 @@ import 'rxjs/add/operator/map';
     <p>Session ID: {{ sessionId | async }}</p>
     <a id="anchor"></a>
     <p>Token: {{ token | async }}</p>
+
+    Preloaded Modules
+    <ul>
+      <li *ngFor="let module of modules">{{ module }}</li>
+    </ul>
   `
 })
 export class AdminDashboardComponent implements OnInit {
   sessionId: Observable<string>;
   token: Observable<string>;
+  modules: string[];
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private preloadStrategy: PreloadSelectedModules
+  ) {
+    this.modules = preloadStrategy.preloadedModules;
+  }
 
   ngOnInit() {
     // Capture the session ID if available

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

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+// #docregion import-router
+import { RouterModule } from '@angular/router';
+// #enddocregion import-router
+
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
+// #docregion can-load-guard
+import { AuthGuard }          from './auth-guard.service';
+// #enddocregion can-load-guard
+
+// #docregion lazy-load-admin, can-load-guard
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'admin',
+        loadChildren: 'app/admin/admin.module#AdminModule',
+    // #enddocregion lazy-load-admin
+        canLoad: [AuthGuard]
+    // #docregion lazy-load-admin
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}

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

@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion, preload-v1
+import { NgModule }     from '@angular/core';
+import {
+  RouterModule,
+// #enddocregion preload-v1
+  PreloadAllModules
+// #docregion preload-v1
+} from '@angular/router';
+
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
+import { AuthGuard }          from './auth-guard.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'admin',
+        loadChildren: 'app/admin/admin.module#AdminModule',
+        canLoad: [AuthGuard]
+      },
+      {
+        path: '',
+        redirectTo: '/heroes',
+        pathMatch: 'full'
+      },
+      {
+        path: 'crisis-center',
+        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+      },
+    ],
+    // #enddocregion preload-v1
+    { preloadingStrategy: PreloadAllModules }
+    // #docregion preload-v1
+    )
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}

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

@@ -1,33 +1,43 @@
 // #docplaster
-// #docregion
+// #docregion, preload-v1
 import { NgModule }     from '@angular/core';
-// #docregion import-router
 import { RouterModule } from '@angular/router';
-// #enddocregion import-router
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
-// #docregion can-load-guard
 import { AuthGuard }          from './auth-guard.service';
-// #enddocregion can-load-guard
+import { PreloadSelectedModules } from './selective-preload-strategy';
 
-// #docregion lazy-load-admin, can-load-guard
 @NgModule({
   imports: [
     RouterModule.forRoot([
       {
         path: 'admin',
         loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
         canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
+      },
+      {
+        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
   ],
   providers: [
-    CanDeactivateGuard
+    CanDeactivateGuard,
+    PreloadSelectedModules
   ]
 })
 export class AppRoutingModule {}

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

@@ -9,6 +9,8 @@ import { AppRoutingModule }    from './app-routing.module';
 import { HeroesModule }        from './heroes/heroes.module';
 import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
 import { LoginRoutingModule }  from './login-routing.module';
+import { LoginComponent }       from './login.component';
+
 import { DialogService }       from './dialog.service';
 
 @NgModule({
@@ -21,7 +23,8 @@ import { DialogService }       from './dialog.service';
     AppRoutingModule
   ],
   declarations: [
-    AppComponent
+    AppComponent,
+    LoginComponent
   ],
   providers: [
     DialogService

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

@@ -5,11 +5,9 @@ import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
 import { AppRoutingModule }     from './app-routing.module';
-import { LoginRoutingModule }   from './login-routing.module';
 
 import { HeroesModule }         from './heroes/heroes.module';
-import { CrisisCenterModule }   from './crisis-center/crisis-center.module';
-
+import { LoginRoutingModule }   from './login-routing.module';
 import { LoginComponent }       from './login.component';
 
 import { DialogService }        from './dialog.service';
@@ -19,7 +17,6 @@ import { DialogService }        from './dialog.service';
     BrowserModule,
     FormsModule,
     HeroesModule,
-    CrisisCenterModule,
     LoginRoutingModule,
     AppRoutingModule
   ],

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

@@ -0,0 +1,60 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      // #docregion redirect
+      {
+        path: '',
+        redirectTo: '/crisis-center',
+        pathMatch: 'full'
+      },
+      // #enddocregion redirect
+      {
+        path: 'crisis-center',
+        component: CrisisCenterComponent,
+        children: [
+          {
+            path: '',
+            component: CrisisListComponent,
+            children: [
+              {
+                path: ':id',
+                component: CrisisDetailComponent,
+                canDeactivate: [CanDeactivateGuard],
+                resolve: {
+                  crisis: CrisisDetailResolve
+                }
+              },
+              {
+                path: '',
+                component: CrisisCenterHomeComponent
+              }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CrisisDetailResolve
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion

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

@@ -16,15 +16,8 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 @NgModule({
   imports: [
     RouterModule.forChild([
-      // #docregion redirect
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      {
-        path: 'crisis-center',
         component: CrisisCenterComponent,
         children: [
           {

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts

@@ -35,14 +35,14 @@ import { DialogService }          from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'

public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts

@@ -34,14 +34,14 @@ import { DialogService }  from '../dialog.service';
           transform: 'translateX(0)'
         })
       ),
-      transition('void => *', [
+      transition(':enter', [
         style({
           opacity: 0,
           transform: 'translateX(-100%)'
         }),
         animate('0.2s ease-in')
       ]),
-      transition('* => void', [
+      transition(':leave', [
         animate('0.5s ease-out', style({
           opacity: 0,
           transform: 'translateY(100%)'