From df5d27d0d8fb82570cb5d72ce7b763601ab3b64b Mon Sep 17 00:00:00 2001
From: SteveSandersonMS <stevesa@microsoft.com>
Date: Thu, 1 Dec 2016 15:13:38 +0000
Subject: [PATCH] Example of Angular 2 lazy loading to help with #465

---
 templates/Angular2Spa/ClientApp/app/app.module.ts  |  4 +---
 .../app/components/counter/counter.module.ts       | 14 ++++++++++++++
 templates/Angular2Spa/package.json                 |  1 +
 templates/Angular2Spa/webpack.config.js            |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 templates/Angular2Spa/ClientApp/app/components/counter/counter.module.ts

diff --git a/templates/Angular2Spa/ClientApp/app/app.module.ts b/templates/Angular2Spa/ClientApp/app/app.module.ts
index 6d912da..a9ff087 100644
--- a/templates/Angular2Spa/ClientApp/app/app.module.ts
+++ b/templates/Angular2Spa/ClientApp/app/app.module.ts
@@ -5,14 +5,12 @@ import { AppComponent } from './components/app/app.component'
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
-import { CounterComponent } from './components/counter/counter.component';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     declarations: [
         AppComponent,
         NavMenuComponent,
-        CounterComponent,
         FetchDataComponent,
         HomeComponent
     ],
@@ -21,7 +19,7 @@ import { CounterComponent } from './components/counter/counter.component';
         RouterModule.forRoot([
             { path: '', redirectTo: 'home', pathMatch: 'full' },
             { path: 'home', component: HomeComponent },
-            { path: 'counter', component: CounterComponent },
+            { path: 'counter', loadChildren: './components/counter/counter.module#CounterModule' },
             { path: 'fetch-data', component: FetchDataComponent },
             { path: '**', redirectTo: 'home' }
         ])
diff --git a/templates/Angular2Spa/ClientApp/app/components/counter/counter.module.ts b/templates/Angular2Spa/ClientApp/app/components/counter/counter.module.ts
new file mode 100644
index 0000000..1c18450
--- /dev/null
+++ b/templates/Angular2Spa/ClientApp/app/components/counter/counter.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CounterComponent } from './counter.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            { path: '', component: CounterComponent }
+        ])
+    ],
+    exports: [ RouterModule ],
+    declarations: [ CounterComponent ]
+})
+export class CounterModule {}
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
index 8324fd5..2165ac5 100644
--- a/templates/Angular2Spa/package.json
+++ b/templates/Angular2Spa/package.json
@@ -20,6 +20,7 @@
     "angular2-universal": "^2.1.0-rc.1",
     "angular2-universal-patch": "^0.2.1",
     "angular2-universal-polyfills": "^2.1.0-rc.1",
+    "angular2-router-loader": "^0.3.4",
     "aspnet-prerendering": "^2.0.0",
     "aspnet-webpack": "^1.0.17",
     "awesome-typescript-loader": "^3.0.0",
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
index 3cfc02c..784c492 100644
--- a/templates/Angular2Spa/webpack.config.js
+++ b/templates/Angular2Spa/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = (env) => {
         },
         module: {
             rules: [
-                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
+                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
                 { test: /\.html$/, use: 'html-loader?minimize=false' },
                 { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }