webpack-toolkit 0,0

Webpack tools and helpers for Angular 2 by @AngularClass

Angular 2 Fundamentals


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 ##AngularClass > Learn AngularJS, Angular 2, and Modern Web Development from the best. > Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]

Related Repositories

dojo-webpack-loader

dojo-webpack-loader

Webpack loader for Dojo Toolkit 1.x ...

webpack-toolkit

webpack-toolkit

Webpack tools and helpers for Angular 2 by @AngularClass ...

reacter

reacter

Application development toolkit with React / Express / MongoDB / Webpack ...

dojo-webpack-loader

dojo-webpack-loader

Webpack loader for Dojo Toolkit 1.x ...


Top Contributors

gdi2290 rzubov