---

AngularClass Webpack Toolkit

Webpack helpers and tools for Angular 2

Install

npm install @angularclass/webpack-toolkit --save-dev

Async Component Route

app/about/about.ts

@Component({selector: 'about',template: '<h1>About</h1>'})exportclassAbout{}

app/app.routes.ts

exportconstroutes=[{path: '',component: Home},{path: 'about',component: 'About'}];// create index.ts that exports this file

main.browser.ts

import{routes}from'./app/app.routes';import{provideWebpack}from'@angularclass/webpack-toolkit';bootstrap(App,[provideRouter(routes),provideWebpack({'About': require('es6-promise!./app/about')})]);

Async Component with Children Routes

app/about/about.ts

@Component({selector: 'about',template: '<h1>About</h1> <router-outlet></router-outlet>'})exportclassAbout{}exportconstroutes={path: 'about',component: About,children: [{path: '',component: Index},{path: 'edit',component: Edit}]}

app/app.routes.ts

import{WebpackAsyncRoute}from'@angularclass/webpack-toolkit';exportconstroutes=[{path: '',component: Home},{path: 'about',component: 'About',canActivate: [WebpackAsyncRoute]}];// create index.ts that exports this file

main.browser.ts

import{routes}from'./app/app.routes';import{provideWebpack}from'@angularclass/webpack-toolkit';bootstrap(App,[provideRouter(routes),provideWebpack({'About': require('es6-promise!./app/about')})]);

---

enjoy — AngularClass

##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com