feat(lazy-loading): add lazy demo and fixed HMR (TrilonIO#197)

closes TrilonIO#191

updates TrilonIO#165 (still needs to have speed improved)

Author: MarkPieszak

Client/app/app.module.ts

@@ -42,7 +42,7 @@ export function createTranslateLoader(http: Http, baseHref) {
         HomeComponent,
         ChatComponent,
         Ng2BootstrapComponent
-    ], 
+    ],
     imports: [
         CommonModule,
         HttpModule,
@@ -131,6 +131,8 @@ export function createTranslateLoader(http: Http, baseHref) {
                 }
             },
 
+            { path: 'lazy', loadChildren: './containers/+lazy/lazy.module#LazyModule'},
+
             // All else fails - go home!
             { path: '**', redirectTo: 'home' }
         ])

Client/app/components/navmenu/navmenu.component.html

@@ -24,12 +24,17 @@
         </li>
         <li [routerLinkActive]="['link-active']">
           <a [routerLink]="['/users']">
-            <span class='glyphicon glyphicon-user'></span> REST API Demo
+            <span class='glyphicon glyphicon-user'></span> Rest API Demo
           </a>
         </li>
         <li [routerLinkActive]="['link-active']">
           <a [routerLink]="['/ng2-bootstrap']">
-            <span class='glyphicon glyphicon-user'></span> ng2-Bootstrap demo
+            <span class='glyphicon glyphicon-th-large'></span> ngx-Bootstrap demo
+          </a>
+        </li>
+        <li [routerLinkActive]="['link-active']">
+          <a [routerLink]="['/lazy']">
+            <span class='glyphicon glyphicon-star-empty'></span> Lazy-loaded demo
           </a>
         </li>
         <!--<li [routerLinkActive]="['link-active']">

Client/app/containers/+lazy/lazy.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lazy-view',
+  template: `
+    <h1>Lazy-Loaded Component!</h1>
+    <blockquote>
+      Fun fact: This was lazy-loaded :)
+      Check your Network tab!
+    </blockquote>
+  `
+})
+export class LazyComponent { }

Client/app/containers/+lazy/lazy.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LazyComponent } from './lazy.component';
+
+@NgModule({
+  declarations: [LazyComponent],
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: LazyComponent, pathMatch: 'full' }
+    ])
+  ]
+})
+export class LazyModule {
+
+}

Client/main.browser.ts

@@ -6,17 +6,17 @@ import { BrowserAppModule } from './app/browser-app.module';
 const rootElemTagName = 'app'; // Update this if you change your root component selector
 
 // // Enable either Hot Module Reloading or production mode
-// if (module['hot']) {
-//     module['hot'].accept();
-//     module['hot'].dispose(() => {
-//         // Before restarting the app, we create a new root element and dispose the old one
-//         const oldRootElem = document.querySelector(rootElemTagName);
-//         const newRootElem = document.createElement(rootElemTagName);
-//         oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
-//         modulePromise.then(appModule => appModule.destroy());
-//     });
-// } else {
-//     enableProdMode();
-// }
+if (module['hot']) {
+    module['hot'].accept();
+    module['hot'].dispose(() => {
+        // Before restarting the app, we create a new root element and dispose the old one
+        const oldRootElem = document.querySelector(rootElemTagName);
+        const newRootElem = document.createElement(rootElemTagName);
+        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
+        modulePromise.then(appModule => appModule.destroy());
+    });
+} else {
+    enableProdMode();
+}
 
 const modulePromise = platformBrowserDynamic().bootstrapModule(BrowserAppModule);