Angular2+typescript+webpack2 (AOT support, tree shaking, lazy loading)

Overview

ANGULAR2 's official recommendation should be to use SYSTEMJS to load, but when I use the tree shaking, I find that if I use Systemjs+rollup, I can only package it into one file, and then lazy loading can't do it.

So I used webpack2,webpack2 with the tree shaking, as long as the Tsconfig in the module set to es2015, although the effect is not rollup good, but support lazy loading.

In addition, ANGULAR2 currently does not support typescript 2.1.X, so if you want to use async/await on "target": "ES5", you can set target to es2015, then introduce Babel-loader, In this case, the packaged code will be a little bit larger.

Source

The GitHub address for the project is Https://github.com/nickppa/myAngular2Aot, the official hero example, without the introduction of Babel under the master branch, The Babel is introduced under the Webpack-babel branch to support Async/await.

Reference to Https://github.com/AngularClass/angular2-webpack-starter, not using HMR (unloading), looked at the HMR of the relevant code, a bit like the redux of the concept of a single state.

Spit Groove Typescriptinterface

Feel Typescript interface is a chicken, rather than all defined as class, the original is as follows

It's not a Angular ' s fault. An interface is a TypeScript design-time artifact. JavaScript doesn ' t has interfaces. The TypeScript interface disappears from the generated JavaScript. There is no interface type information left for Angular to find at runtime.

That is, when Typescript is converted to JavaScript, the interface is deleted.

function overloading

In addition, the Typescript function overload, the personal feeling this writing is too low.

Summarize

The feeling of typescript is mostly strongly typed, supported by various new grammars for ES6,ES7 (how to Feel Babel better), as well as generics and TSC compilation. Other advantages temporarily haven't found, say 2.1 in keyof pretty good, but angular2 inside now still can't use AH.

In addition, the project attempted to use the immutable, as well as the ANGULAR2 OnPush strategy.

Angular2+typescript+webpack2 (AOT support, tree shaking, lazy loading)