feature: added AOT compile support (PatrickJS#885) (PatrickJS#1298)

* feature: added AOT compile support (PatrickJS#885)

* updated travis.yml with new ci script

* removed yarn.lock from .gitignore

* (optimize) vendor tree shaking and bundle analysis tool

* (fix) support node 5

* upgraded to webpack 2.2.0-rc-2, removed analyzer

Author: colinskow

.gitignore

@@ -53,6 +53,7 @@ npm-debug.log
 /dist/**
 /.awcache
 .webpack.json
+compiled/
 
 # Doc #
 /doc/

.travis.yml

@@ -24,9 +24,4 @@ before_script:
   - sh -e /etc/init.d/xvfb start
   - sleep 3
 script:
-  - npm run lint
-  - npm test
-  - npm run build:prod
-  - npm run server:prod:ci &
-  - sleep 3
-  - npm run e2e
+  - npm run ci

README.md

@@ -21,10 +21,10 @@ ___
 # Angular2 Webpack Starter [![Join Slack](https://img.shields.io/badge/slack-join-brightgreen.svg)](https://angularclass.com/slack-join) [![Join the chat at https://gitter.im/angularclass/angular2-webpack-starter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angularclass/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 
-> An Angular 2 starter kit featuring [Angular 2](https://angular.io) and [Angular 4](https://github.com/angular/angular/tree/4.0.0-beta.0) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/),
-[Http](https://angular.io/docs/js/latest/api/http/),
+> An Angular 2 starter kit featuring [Angular 2](https://angular.io) and [Angular 4](https://github.com/angular/angular/tree/4.0.0-beta.0) ([Ahead of Time Compile](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), [Router](https://angular.io/docs/ts/latest/guide/router.html), [Forms](https://angular.io/docs/ts/latest/guide/forms.html),
+[Http](https://angular.io/docs/ts/latest/guide/server-communication.html),
 [Services](https://gist.github.com/gdi2290/634101fec1671ee12b3e#_follow_@AngularClass_on_twitter),
-[Tests](https://angular.io/docs/js/latest/api/test/), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Material](https://github.com/angular/material2), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [Istanbul](https://github.com/gotwarlost/istanbul), [TypeScript](http://www.typescriptlang.org/), [@types](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0ahUKEwjgjdrR7u_NAhUQ7GMKHXgpC4EQFggnMAI&url=https%3A%2F%2Fwww.npmjs.com%2F~types&usg=AFQjCNG2PFhwEo88JKo12mrw_4d0w1oNiA&sig2=N69zbO0yN8ET7v4KVCUOKA), [TsLint](http://palantir.github.io/tslint/), [Codelyzer](https://github.com/mgechev/codelyzer), [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), and [Webpack 2](http://webpack.github.io/) by [AngularClass](https://angularclass.com).
+[Tests](https://angular.io/docs/ts/latest/guide/testing.html), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Material](https://github.com/angular/material2), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [Istanbul](https://github.com/gotwarlost/istanbul), [TypeScript](http://www.typescriptlang.org/), [@types](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0ahUKEwjgjdrR7u_NAhUQ7GMKHXgpC4EQFggnMAI&url=https%3A%2F%2Fwww.npmjs.com%2F~types&usg=AFQjCNG2PFhwEo88JKo12mrw_4d0w1oNiA&sig2=N69zbO0yN8ET7v4KVCUOKA), [TsLint](http://palantir.github.io/tslint/), [Codelyzer](https://github.com/mgechev/codelyzer), [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html), and [Webpack 2](http://webpack.github.io/) by [AngularClass](https://angularclass.com).
 
 > If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angularclass/NG6-starter)
 > If you're looking to learn about Webpack and ES6 Build Tools check out [ES6-build-tools](https://github.com/AngularClass/ES6-build-tools)
@@ -37,6 +37,8 @@ This seed repo serves as an Angular 2 starter for anyone looking to get up and r
 * Ready to go build system using Webpack for working with TypeScript.
 * Angular 2 examples that are ready to go when experimenting with Angular 2.
 * A great Angular 2 seed repo for anyone who wants to start their project.
+* Ahead of Time (AoT) compile for rapid page loads of your production builds.
+* Tree shaking to automatically remove unused code from your production bundle.
 * Testing Angular 2 code with Jasmine and Karma.
 * Coverage with Istanbul and Karma
 * End-to-end Angular 2 code using Protractor.
@@ -168,8 +170,10 @@ npm run server:prod
 ```bash
 # development
 npm run build:dev
-# production
+# production (jit)
 npm run build:prod
+# AoT
+npm run build:aot
 ```
 
 ### hot module replacement
@@ -182,7 +186,7 @@ npm run server:dev:hmr
 npm run watch
 ```
 
-### run tests
+### run unit tests
 ```bash
 npm run test
 ```
@@ -194,10 +198,16 @@ npm run watch:test
 
 ### run end-to-end tests
 ```bash
-# make sure you have your server running in another terminal
+# this will start a test server and launch Protractor
 npm run e2e
 ```
 
+### continuous integration (run unit tests and e2e tests together)
+```bash
+# this will test both your JIT and AoT builds
+npm run ci
+```
+
 ### run webdriver (for end-to-end)
 ```bash
 npm run webdriver:update
@@ -219,6 +229,16 @@ npm run build:docker
 # Configuration
 Configuration files live in `config/` we are currently using webpack, karma, and protractor for different stages of your application
 
+# AoT  Don'ts
+The following are some things that will make AoT compile fail.
+
+- Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
+- Don’t use default exports.
+- Don’t use form.controls.controlName, use form.get(‘controlName’)
+- Don’t use control.errors?.someError, use control.hasError(‘someError’)
+- Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
+- Inputs, Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public
+
 # Contributing
 You can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request
 

config/helpers.js

@@ -3,13 +3,19 @@
  */
 var path = require('path');
 
+const EVENT = process.env.npm_lifecycle_event || '';
+
 // Helper functions
 var ROOT = path.resolve(__dirname, '..');
 
 function hasProcessFlag(flag) {
   return process.argv.join('').indexOf(flag) > -1;
 }
 
+function hasNpmFlag(flag) {
+  return EVENT.includes(flag);
+}
+
 function isWebpackDevServer() {
   return process.argv[1] && !! (/webpack-dev-server/.exec(process.argv[1]));
 }
@@ -20,5 +26,6 @@ function root(args) {
 }
 
 exports.hasProcessFlag = hasProcessFlag;
+exports.hasNpmFlag = hasNpmFlag;
 exports.isWebpackDevServer = isWebpackDevServer;
 exports.root = root;

config/webpack.common.js

@@ -14,7 +14,7 @@ const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplaceme
 const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
 const HtmlElementsPlugin = require('./html-elements-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
@@ -24,6 +24,7 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
  * Webpack Constants
  */
 const HMR = helpers.hasProcessFlag('hot');
+const AOT = helpers.hasNpmFlag('aot');
 const METADATA = {
   title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
   baseUrl: '/',
@@ -57,8 +58,8 @@ module.exports = function (options) {
     entry: {
 
       'polyfills': './src/polyfills.browser.ts',
-      'vendor':    './src/vendor.browser.ts',
-      'main':      './src/main.browser.ts'
+      'main':      AOT ? './src/main.browser.aot.ts' :
+                  './src/main.browser.ts'
 
     },
 
@@ -101,9 +102,9 @@ module.exports = function (options) {
           test: /\.ts$/,
           use: [
             '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
-            'awesome-typescript-loader',
+            'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
             'angular2-template-loader',
-            'angular-router-loader'
+            'angular-router-loader?loader=system&genDir=compiled/src/app&aot=' + AOT
           ],
           exclude: [/\.(spec|e2e)\.ts$/]
         },
@@ -168,7 +169,7 @@ module.exports = function (options) {
        *
        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
        */
-      new ForkCheckerPlugin(),
+      new CheckerPlugin(),
       /*
        * Plugin: CommonsChunkPlugin
        * Description: Shares common code between the pages.
@@ -177,6 +178,17 @@ module.exports = function (options) {
        * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
        * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
        */
+      new CommonsChunkPlugin({
+        name: 'polyfills',
+        chunks: ['polyfills']
+      }),
+      // This enables tree shaking of the vendor modules
+      new CommonsChunkPlugin({
+        name: 'vendor',
+        chunks: ['main'],
+        minChunks: module => /node_modules\//.test(module.resource)
+      }),
+      // Specify the correct order the scripts will be injected in
       new CommonsChunkPlugin({
         name: ['polyfills', 'vendor'].reverse()
       }),

config/webpack.prod.js

@@ -265,6 +265,16 @@ module.exports = function (env) {
         }
       }),
 
+      /**
+       * Plugin: BundleAnalyzerPlugin
+       * Description: Webpack plugin and CLI utility that represents 
+       * bundle content as convenient interactive zoomable treemap
+       * 
+       * `npm run build:prod -- --env.analyze` to use
+       *
+       * See: https://github.com/th0r/webpack-bundle-analyzer
+       */
+
     ],
 
     /*

package.json

@@ -11,23 +11,32 @@
   "homepage": "https://github.com/angularclass/angular2-webpack-starter",
   "license": "MIT",
   "scripts": {
-    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
+    "build:aot:prod": "npm run clean:dist && npm run clean:aot && npm run ngc && webpack --config config/webpack.prod.js  --progress --profile --bail",
+    "build:aot": "npm run build:aot:prod",
+    "build:dev": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile",
     "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
-    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
+    "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js  --progress --profile --bail",
     "build": "npm run build:dev",
-    "ci": "npm run lint && npm test && npm run e2e",
+    "ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
+    "ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
+    "ci:nobuild": "npm run lint && npm test && npm run e2e",
+    "ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
+    "ci": "npm run ci:testall",
+    "clean:aot": "npm run rimraf -- compiled",
     "clean:dist": "npm run rimraf -- dist",
     "clean:install": "npm set progress=false && npm install",
     "clean:start": "npm start",
-    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
+    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled",
     "docker": "docker",
     "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
     "e2e:live": "npm run e2e -- --elementExplorer",
-    "e2e": "npm run protractor",
+    "e2e": "npm-run-all -p -r server:prod:ci e2e:only",
+    "e2e:only": "npm run protractor",
     "github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
     "github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
     "github-deploy": "npm run github-deploy:dev",
     "lint": "npm run tslint \"src/**/*.ts\"",
+    "ngc": "./node_modules/.bin/ngc -p tsconfig.webpack.json",
     "postversion": "git push && git push --tags",
     "prebuild:dev": "npm run clean:dist",
     "prebuild:prod": "npm run clean:dist",
@@ -39,8 +48,8 @@
     "rimraf": "rimraf",
     "server:dev:hmr": "npm run server:dev -- --inline --hot",
     "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
-    "server:prod": "http-server dist --cors",
-    "server:prod:ci": "http-server dist -p 3000 --cors",
+    "server:prod": "http-server dist -c-1 --cors",
+    "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
     "server": "npm run server:dev",
     "start:hmr": "npm run server:dev:hmr",
     "start": "npm run server:dev",
@@ -60,36 +69,38 @@
     "webpack": "webpack"
   },
   "dependencies": {
-    "@angular/common": "2.2.1",
-    "@angular/compiler": "2.2.1",
-    "@angular/core": "2.2.1",
-    "@angular/forms": "2.2.1",
-    "@angular/http": "2.2.1",
-    "@angular/platform-browser": "2.2.1",
-    "@angular/platform-browser-dynamic": "2.2.1",
-    "@angular/platform-server": "2.2.1",
-    "@angular/router": "3.2.1",
+    "@angular/common": "~2.4.1",
+    "@angular/compiler": "~2.4.1",
+    "@angular/core": "~2.4.1",
+    "@angular/forms": "~2.4.1",
+    "@angular/http": "~2.4.1",
+    "@angular/platform-browser": "~2.4.1",
+    "@angular/platform-browser-dynamic": "~2.4.1",
+    "@angular/platform-server": "~2.4.1",
+    "@angular/router": "~3.4.1",
     "@angularclass/conventions-loader": "^1.0.2",
     "@angularclass/hmr": "~1.2.2",
     "@angularclass/hmr-loader": "~3.0.2",
     "assets-webpack-plugin": "^3.4.0",
     "core-js": "^2.4.1",
     "http-server": "^0.9.0",
     "ie-shim": "^0.1.0",
-    "rxjs": "5.0.0-beta.12",
-    "zone.js": "~0.6.26"
+    "reflect-metadata": "^0.1.9",
+    "rxjs": "~5.0.2",
+    "zone.js": "~0.7.4"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "~2.4.1",
     "@types/hammerjs": "^2.0.33",
     "@types/jasmine": "^2.2.34",
     "@types/node": "^6.0.38",
     "@types/selenium-webdriver": "2.53.33",
     "@types/source-map": "^0.1.27",
     "@types/uglify-js": "^2.0.27",
-    "@types/webpack": "^1.12.34",
+    "@types/webpack": "^2.0.0",
     "angular-router-loader": "^0.4.0",
     "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^2.2.1",
+    "awesome-typescript-loader": "~3.0.0-beta.17",
     "codelyzer": "~1.0.0-beta.4",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.26.0",
@@ -109,6 +120,7 @@
     "karma-remap-coverage": "^0.1.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "1.8.0",
+    "npm-run-all": "^3.1.2",
     "parse5": "^2.2.2",
     "protractor": "^4.0.10",
     "raw-loader": "0.5.1",
@@ -123,12 +135,12 @@
     "tslint": "~3.15.1",
     "tslint-loader": "^2.1.5",
     "typedoc": "^0.5.0",
-    "typescript": "2.1.1",
+    "typescript": "2.0.10",
     "url-loader": "^0.5.7",
     "v8-lazy-parse-webpack-plugin": "^0.3.0",
-    "webpack": "2.1.0-beta.27",
+    "webpack": "2.2.0-rc.2",
     "webpack-dev-middleware": "^1.6.1",
-    "webpack-dev-server": "2.1.0-beta.11",
+    "webpack-dev-server": "2.2.0-rc.0",
     "webpack-md5-hash": "^0.0.5",
     "webpack-merge": "~1.0.1"
   },

src/app/+detail/index.ts

@@ -22,6 +22,6 @@ export const routes = [
     RouterModule.forChild(routes),
   ]
 })
-export default class AboutModule {
+export class AboutModule {
   static routes = routes;
 }

src/app/app.routes.ts

@@ -10,9 +10,6 @@ export const ROUTES: Routes = [
   { path: '',      component: HomeComponent },
   { path: 'home',  component: HomeComponent },
   { path: 'about', component: AboutComponent },
-  {
-    path: 'detail', loadChildren: () => System.import('./+detail')
-      .then((comp: any) => comp.default),
-  },
+  { path: 'detail', loadChildren: './+detail/index#AboutModule'},
   { path: '**',    component: NoContentComponent },
 ];

src/main.browser.aot.ts

@@ -0,0 +1,26 @@
+/*
+ * Angular bootstraping
+ */
+import { platformBrowser } from '@angular/platform-browser';
+import { decorateModuleRef } from './app/environment';
+/*
+ * App Module
+ * our top level module that holds all of our components
+ */
+import { AppModuleNgFactory } from '../compiled/src/app/app.module.ngfactory';
+
+/*
+ * Bootstrap our Angular app with a top level NgModule
+ */
+export function main(): Promise<any> {
+  return platformBrowser()
+    .bootstrapModuleFactory(AppModuleNgFactory)
+    .then(decorateModuleRef)
+    .catch(err => console.error(err));
+}
+
+export function bootstrapDomReady() {
+  document.addEventListener('DOMContentLoaded', main);
+}
+
+bootstrapDomReady();