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

@@ -16,6 +16,7 @@
     "@angular/router": "3.0.2",
     "@types/node": "^6.0.42",
     "angular2-platform-node": "~2.0.11",
+    "angular2-router-loader": "^0.3.4",
     "angular2-template-loader": "^0.6.0",
     "angular2-universal": "~2.0.11",
     "angular2-universal-polyfills": "~2.0.11",

templates/Angular2Spa/webpack.config.js

@@ -13,7 +13,7 @@ var sharedConfig = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader'] },
+            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
             { test: /\.html$/, loader: 'html-loader?minimize=false' },
             { test: /\.css$/, loader: 'to-string-loader!css-loader' },
             { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }