Example of Angular 2 lazy loading to help with #465

This commit is contained in:
SteveSandersonMS
2016-12-01 15:13:38 +00:00
committed by Steve Sanderson
parent 1f03b1e633
commit df5d27d0d8
4 changed files with 17 additions and 4 deletions

View File

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

View File

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

View File

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

View File

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