feat(lazy-loading): showcase lazy-loading & chunking example

Webpack2 chunking & lazy-loading example
Closes TrilonIO#9

Author: MarkPieszak

Client/app/app.routes.ts

@@ -20,6 +20,18 @@ export const ROUTES: Route[] = [
     { path: 'login', component: LoginComponent },
     { path: 'examples', component: ExamplesComponent },
 
+    {   // ** LAZY-LOADING EXAMPLE **
+        // Notice we don't reference the file anywhere else, imports, declarations, anywhere
+        // Webpack2 will provide the separate "chunk" due to System.import
+        path: 'faq', 
+        loadChildren : () => System.import('../containers/+faq/faq.module').then((file: any) => {
+            // We use .default here since we use `export default` 
+            // in the FAQModule NgModule
+            return file.default;
+        }) 
+    },
+     // loadChildren: '../containers/+faq/faq.module#FAQModule' },
+    
     // All else fails - go home
     { path: '**', redirectTo: 'home' }
 ];

Client/app/index.ts

@@ -20,3 +20,5 @@ export * from './state/app.reducer';
 export * from './state/app-state';
 export * from './state/hmr';
 
+export * from './shared-module/base.shared.module';
+

Client/app/platform-modules/app.browser.module.ts

@@ -5,7 +5,7 @@ import { Store, StoreModule } from '@ngrx/store';
 // for AoT we need to manually split universal packages (/browser & /node)
 import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-universal/browser';
 
-import { AppCommonModule } from './common.module';
+import { AppCommonModule } from './app.common.module';
 import { AppComponent } from 'app';
 // Universal : XHR Cache 
 import { CacheService } from 'app-shared';

Client/app/platform-modules/common.module.ts renamed to Client/app/platform-modules/app.common.module.ts

@@ -1,14 +1,12 @@
 /*
- * _Common_ NgModule to share between Browser & Server platforms
+ * _Common_ NgModule to share between our "BASE" App.Browser & App.Server module platforms
  *
  *  If something belongs to BOTH, just put it Here.
  * - If you need something to be very "platform"-specific, put it 
  *   in the specific one (app.browser or app.server)
  */
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { Store, StoreModule } from '@ngrx/store';
@@ -17,7 +15,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
 
 // Main "APP" Root Component
-import { AppComponent, ROUTES, appReducer } from 'app';
+import { BaseSharedModule, AppComponent, ROUTES, appReducer } from 'app';
 
 // Component imports
 import { NavMenuComponent } from 'app-components';
@@ -47,11 +45,12 @@ import { appState } from 'app';
 const MODULES = [
     // Do NOT include UniversalModule, HttpModule, or JsonpModule here
 
+    // This has ALL the "Common" stuff (CommonModule, FormsModule, ReactiveFormsModule, etc etc)
+    // You would import this into your child NgModules so you don't need to duplicate so much code
+    BaseSharedModule,
+
     // Angular
-    CommonModule,
     RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
 
     // NgRx
     StoreModule.provideStore(appReducer, appState),

Client/app/platform-modules/app.server.module.ts

@@ -6,7 +6,7 @@ import { Store, StoreModule } from '@ngrx/store';
 // for AoT we need to manually split universal packages (/browser & /node)
 import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node';
 
-import { AppCommonModule } from './common.module';
+import { AppCommonModule } from './app.common.module';
 import { AppComponent } from 'app';
 // Universal : XHR Cache 
 import { CacheService } from 'app-shared';

Client/app/shared-module/base.shared.module.ts

@@ -0,0 +1,25 @@
+/*
+ * --Base-- SHARED Module
+ * 
+ * This has the most "basic" Shared imports that can be imported into 
+ * all children (lazy-loaded for example) NgModules.
+ * (ie: Admin NgModule can import this, to import all the basic App functionality, FormsModule, CommonModule etc)
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        CommonModule, FormsModule, ReactiveFormsModule
+    ]
+})
+export class BaseSharedModule {
+    
+}
+
+

Client/components/navmenu/navmenu.component.html

@@ -20,6 +20,11 @@
             <span class="glyphicon glyphicon-education"></span> RestAPI Demo
         </a>
     </li>
+    <li [routerLinkActive]="['link-active']">
+        <a [routerLink]="['/faq']">
+            <span class="glyphicon glyphicon-education"></span> FAQ
+        </a>
+    </li>
     <li *ngIf="!loggedIn$" [routerLinkActive]="['link-active']">
         <a [routerLink]="['/login']">
             <span class="glyphicon glyphicon-user"></span> Login

Client/containers/+faq/faq.component.ts

@@ -0,0 +1,25 @@
+import { Component, Inject, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'app-faq',
+  template: `
+    <h1>FAQ</h1>
+    <blockquote>
+      Note: <strong>This component was Lazy-loaded!</strong>
+    </blockquote>
+  `
+})
+export class FAQComponent implements OnInit {
+
+  // Use "constructor"s only for dependency injection
+  constructor() { }
+
+  // Here you want to handle anything with @Input()'s @Output()'s
+  // Data retrieval / etc - this is when the Component is "ready" and wired up
+  ngOnInit() {
+    console.log('\n\nFAQ Component lazy-loaded!!\n\n');
+  }
+
+}

Client/containers/+faq/faq.module.ts

@@ -0,0 +1,24 @@
+/*
+ * Lazy-Loaded Module & Component
+ *  You can see that it wasn't referenced anywhere in the app / modules
+ *  Except for in the app.routes.ts file
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { BaseSharedModule } from 'app';
+import { FAQComponent } from './faq.component';
+
+@NgModule({
+  imports: [
+    BaseSharedModule,
+    RouterModule.forChild([
+      { path: '', component: FAQComponent }
+    ])
+  ],
+  declarations: [
+    FAQComponent
+  ]
+})
+export default class FAQModule { }

Client/typings.d.ts

@@ -31,6 +31,12 @@ declare module 'modern-lru' {
   export = x;
 }
 
+declare var System: SystemJS;
+
+interface SystemJS {
+  import: (path?: string) => Promise<any>;
+}
+
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;