Example of Angular 2 lazy loading to help with #465

Author: SteveSandersonMS

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' }
         ])

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 {}

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",

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' }