---

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>'
})
export class About {}

app/app.routes.ts

export const routes = [
  { 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>'
})
export class About {}

export const routes = {
 path: 'about', component: About,
 children: [
   { path: '', component: Index },
   { path: 'edit', component: Edit }
 ]
}

app/app.routes.ts

import { WebpackAsyncRoute } from '@angularclass/webpack-toolkit';
export const routes = [
  { 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