webpack-toolkit 0,0

Webpack tools and helpers for Angular 2 by @AngularClass

3 years after

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

webpack

webpack

A bundler for javascript and friends. Packs many modules into a few bundled asse ...

iview

iview

A high quality UI Toolkit built on Vue.js ...

awesome-webpack

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools ...

awesome-webpack

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools ...

rekit

rekit

Toolkit for building scalable web applications with React, Redux and React-route ...


Top Contributors

gdi2290 rzubov