Webpack helpers and tools for Angular 2
npm install @angularclass/webpack-toolkit --save-devapp/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 filemain.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')
})
]);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 filemain.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
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