Angular2 production build

Question

Trying to find working example of production build with Angular2. So far I'm using SystemJs for development and I'm ok with it. Would still like to use non-optimized/minimized/bundled files in dev. But for production I'd like to have bundling (with modules, lazy loading and AOT), minification and tree shaking. Can't get it working yet. I don't care if it's webpack or jspm or rollup or anything else as far as it does the job. I got somewhat close with rollup but it doesn't like some packages (ng2-bootstrap) I think because of es5/es2015

I gave an answer that works with `angular-cli` : **Lazy loading + AOT** + minimized bundle and (basic) tree shaking from webpack (not as good as rollup but so much simpler as it's managed by angular-cli. See http://stackoverflow.com/a/40788258/2398593 — maxime1992, Nov 24 '16 at 14:10

score 1 · Answer 1 · answered Nov 02 '16 at 10:08

I used to use SystemJS + SystemJS Builder and also tried rollup but faced the same issues.

So I've switched to Webpack and have everything working now. Here is my repo: https://github.com/Rebilly/ReDoc

In general:

I do SCSS build and AOT build with ngc before webpack gets in: package.json#L24
I have two bootstrap files: bootstrap.ts (uses AOT factories) and bootstrap.dev.ts (uses runtime compiler)
Based on defined by Webpack Define plugin variable AOT I switch between these two files: index.ts#L11
Webpack 2 claims to have some kind of tree-shaking from the box but seems it is a bit broken now: webpack/issues/2867

I don't use lazy-loading though.

Also, check angular2-webpack-starter.

Angular2 production build

1 Answers1