Angular2-aot-webpack compilation angular2 in the production environment

here, Angular2 is packaged in production mode with Webpack2:

Use rollup packaging or comparison pit, function and plug-in is not as webpack, the key does not support code separation, resulting in angular lazy loader will not be able to use.

Specific steps:

Angular=>aot=>webpack (Tree shaking&& Uglify)

angular=>aot:

First you need to rely on:

"@angular/compiler" "@angular/compiler-cli" "@angular/platform-browser".

NPM Install Them.

Here is the directory structure:

... . /package.json./tsconfig.aot.json/tsconfig.json/webpack.pro.config.js./src/     |--./main.ts     |--./ Main.aot.ts     |--./app.module.ts     |--./router.module.ts     |--./app.component.ts
     |--./child/
              |--./child.module.ts
              |--./child.component.ts
     

　　

Prepare a tsconfig.aot.json:

{"  compileroptions": {    "module": "es2015",    "moduleresolution": "node",    "declaration": true,    " Target ":" es5 ","    noimplicitany ": false,    " sourcemap ": true,    " emitdecoratormetadata ": true,    " Experimentaldecorators ": true,    " typeroots ": ["./node_modules/@types "],    " lib ": [      " Dom ",      " es2015 "    ]  },  " angularcompileroptions ": {   //this is Aot.json unique, gendir:". ", indicating that the generated ngfactory file is placed in the original file path. You can also Gendir: ' AOT ', put it inside the AOT file, but I suggest you put it in the original path. "    gendir": ".", "    skipmetadataemit": true  },  "files": [    "src/app.module.ts",        // Start compiling from the App.module.ts file.    "src/child/child.module.ts"  //this is the lazy loader module, because it is an inert loading module, and does not import or require it in the original module, so it needs to be compiled separately.  ],  "compileonsave": false,  "exclude": [    "node_modules",    "src/polyfill.ts"  ]}

Next running NPM run ngcstart; package.json: "ngcstart": "ngc-p tsconfig-aot.json"

you will find that many *.ngfactory.ts are generated in the src/file, and these are the angular files that are provided to the production environment and eventually used. Since this precompilation is Complete.

(. js file can delete it, ' Rimraf src/*.js src/*/*.js '. ）

Aot=>webpack:

We need to boot these AOT files from main.aot.ts, which is the main.aot.ts file (do not boot from main.ts):

Import {platformbrowser} from    ' @angular/platform-browser ', import {appmodulengfactory} from '. App.module.ngfactory ';p latformbrowser (). bootstrapmodulefactory (appmodulengfactory);

ok, Here's the Webpack configuration:

{/....../entry:{' main ': './src/main.aot.ts '},output:{path: ' dest ', filename: ' [name].bundle.js ', chunkfilename: '                   [id].chunk.js '},module:{rules:[{test:/\.ts$/,use:[' Awesome-typescript-loader ',　　　　　　　　　　　　　　　　I recommend that you use Awesome-typescript-loader for TS Loading.　　　　　　　　　　　　　　' Angular2-template-loader ', ' Angular2-webpack2-lazy-children-loader '//this is a plugin for the lazy loader, which will be said separately later　　　　　　　　　　　　　　]}, {test:/\.json$/,use: ' json-loader '}, {test:/\.html$/,use: ' Raw-loader '}, {test:/\. (jpg|png|gif)/,use: ' file-loader?name=[path][name].              [ext] '}]}plugins:[/..../new Webpack.optimize.UglifyJsPlugin ({  /*mini, and carry out treeshaking. Although there is a problem with this treeshaking.　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　But I don't have a good idea at the moment, and I don't have that much time.　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Babili-webpak-plugin Although shaking dropped the class, but the file size does not seem to change. and Rollup's Treeshaking was excellent, and the final document was more than Webpack uglifyjspLugin to dozens of KB smaller. But this thing is not good to Use.　　　　　　　　　　　　　　　　　　　　:(*/compress:{warnings:true}}) ]}

　　

The final main.bundle.js is the main file we want to Have.

0.chunk.js is the file that the Child.module corresponds to.

Main.bundle.js 200~400kb Size. It is much smaller than the mini file (1MB) that is not obtained by the Aot. The last GZ compression can be controlled at around 100KB. The minimum can be 50KB.

-----------------------------------

Say ' Angular2-webpack2-lazy-children-loader '.

We use lazy loader in this way:

Loadchildren: ' Child.module#childmodule '

But the aot-compiled file name became child.module.ngfactory.ts,

The variables inside have become childmodulengfactory. So for production mode, you need to rewrite it into:

Loadchildren: ' Child.module.ngfactory#childmodulengfactory '

If you change it manually, you can continue to load it in Webpack using ' Angular-router-loader '.

But using ' angular2-webpack2-lazy-children-loader ' is that it will automatically judge and replace this string at load Time. So you, in the production or development mode can be written in your original format.

------------------------------

Can download try: https://github.com/zhantewei2/angular-aot-webpack

Angular2-aot-webpack compilation angular2 in the production environment