feature(compiler): add support for AoT to the CLI.

Also adding a new package, webpack, which is a plugin and loader for
webpack that adds support for AoT.

It is behind a `--aot` flag in the CLI that is supported by build and
serve.

Author: hansl

lib/bootstrap-local.js

@@ -7,6 +7,7 @@ const ts = require('typescript');
 
 
 global.angularCliIsLocal = true;
+global.angularCliPackages = require('./packages');
 
 const compilerOptions = JSON.parse(fs.readFileSync(path.join(__dirname, '../tsconfig.json')));
 

lib/packages.js

@@ -11,8 +11,11 @@ const packages = fs.readdirSync(packageRoot)
   .map(pkgName => ({ name: pkgName, root: path.join(packageRoot, pkgName) }))
   .filter(pkg => fs.statSync(pkg.root).isDirectory())
   .reduce((packages, pkg) => {
-    let name = pkg == 'angular-cli' ? 'angular-cli' : `@angular-cli/${pkg.name}`;
+    let pkgJson = JSON.parse(fs.readFileSync(path.join(pkg.root, 'package.json'), 'utf8'));
+    let name = pkgJson['name'];
     packages[name] = {
+      dist: path.join(__dirname, '../dist', pkg.name),
+      packageJson: path.join(pkg.root, 'package.json'),
       root: pkg.root,
       main: path.resolve(pkg.root, 'src/index.ts')
     };

package.json

@@ -71,6 +71,7 @@
     "fs.realpath": "^1.0.0",
     "glob": "^7.0.3",
     "handlebars": "^4.0.5",
+    "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.19.0",
     "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",

packages/angular-cli/blueprints/component/index.js

@@ -1,11 +1,12 @@
-var path = require('path');
-var chalk = require('chalk');
-var Blueprint = require('ember-cli/lib/models/blueprint');
-var dynamicPathParser = require('../../utilities/dynamic-path-parser');
+const path = require('path');
+const chalk = require('chalk');
+const Blueprint = require('ember-cli/lib/models/blueprint');
+const dynamicPathParser = require('../../utilities/dynamic-path-parser');
 const findParentModule = require('../../utilities/find-parent-module').default;
-var getFiles = Blueprint.prototype.files;
+const getFiles = Blueprint.prototype.files;
 const stringUtils = require('ember-cli-string-utils');
 const astUtils = require('../../utilities/ast-utils');
+const NodeHost = require('@angular-cli/ast-tools').NodeHost;
 
 module.exports = {
   description: '',
@@ -117,7 +118,7 @@ module.exports = {
     if (!options['skip-import']) {
       returns.push(
         astUtils.addDeclarationToModule(this.pathToModule, className, importPath)
-          .then(change => change.apply()));
+          .then(change => change.apply(NodeHost)));
     }
 
     return Promise.all(returns);

packages/angular-cli/blueprints/directive/index.js

@@ -3,6 +3,7 @@ var dynamicPathParser = require('../../utilities/dynamic-path-parser');
 const stringUtils = require('ember-cli-string-utils');
 const astUtils = require('../../utilities/ast-utils');
 const findParentModule = require('../../utilities/find-parent-module').default;
+const NodeHost = require('@angular-cli/ast-tools').NodeHost;
 
 module.exports = {
   description: '',
@@ -73,7 +74,7 @@ module.exports = {
     if (!options['skip-import']) {
       returns.push(
         astUtils.addDeclarationToModule(this.pathToModule, className, importPath)
-          .then(change => change.apply()));
+          .then(change => change.apply(NodeHost)));
     }
 
     return Promise.all(returns);

packages/angular-cli/blueprints/pipe/index.js

@@ -3,6 +3,7 @@ var dynamicPathParser = require('../../utilities/dynamic-path-parser');
 const stringUtils = require('ember-cli-string-utils');
 const astUtils = require('../../utilities/ast-utils');
 const findParentModule = require('../../utilities/find-parent-module').default;
+const NodeHost = require('@angular-cli/ast-tools').NodeHost;
 
 module.exports = {
   description: '',
@@ -61,7 +62,7 @@ module.exports = {
     if (!options['skip-import']) {
       returns.push(
         astUtils.addDeclarationToModule(this.pathToModule, className, importPath)
-          .then(change => change.apply()));
+          .then(change => change.apply(NodeHost)));
     }
 
     return Promise.all(returns);

packages/angular-cli/commands/build.ts

@@ -10,6 +10,7 @@ export interface BuildOptions {
   watcher?: string;
   supressSizes: boolean;
   baseHref?: string;
+  aot?: boolean;
 }
 
 const BuildCommand = Command.extend({
@@ -30,6 +31,7 @@ const BuildCommand = Command.extend({
     { name: 'watcher',        type: String },
     { name: 'suppress-sizes', type: Boolean, default: false },
     { name: 'base-href',      type: String,  default: null, aliases: ['bh'] },
+    { name: 'aot',            type: Boolean, default: false }
   ],
 
   run: function (commandOptions: BuildOptions) {

packages/angular-cli/commands/serve.ts

@@ -25,6 +25,7 @@ export interface ServeTaskOptions {
   ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
+  aot?: boolean;
 }
 
 const ServeCommand = Command.extend({
@@ -77,7 +78,8 @@ const ServeCommand = Command.extend({
     { name: 'environment',          type: String,  default: '', aliases: ['e'] },
     { name: 'ssl',                  type: Boolean, default: false },
     { name: 'ssl-key',              type: String,  default: 'ssl/server.key' },
-    { name: 'ssl-cert',             type: String,  default: 'ssl/server.crt' }
+    { name: 'ssl-cert',             type: String,  default: 'ssl/server.crt' },
+    { name: 'aot',                  type: Boolean, default: false }
   ],
 
   run: function(commandOptions: ServeTaskOptions) {

packages/angular-cli/models/webpack-build-common.ts

@@ -1,11 +1,9 @@
+import * as webpack from 'webpack';
 import * as path from 'path';
+import {BaseHrefWebpackPlugin} from '@angular-cli/base-href-webpack';
+
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-import * as webpack from 'webpack';
-const atl = require('awesome-typescript-loader');
-
-import { BaseHrefWebpackPlugin } from '@angular-cli/base-href-webpack';
-import { findLazyModules } from './find-lazy-modules';
 
 
 export function getWebpackCommonConfig(
@@ -23,7 +21,6 @@ export function getWebpackCommonConfig(
   const scripts = appConfig.scripts
                 ? appConfig.scripts.map((script: string) => path.resolve(appRoot, script))
                 : [];
-  const lazyModules = findLazyModules(appRoot);
 
   let entry: { [key: string]: string[] } = {
     main: [appMain]
@@ -56,21 +53,7 @@ export function getWebpackCommonConfig(
         }
       ],
       loaders: [
-        {
-          test: /\.ts$/,
-          loaders: [
-            {
-              loader: 'awesome-typescript-loader',
-              query: {
-                useForkChecker: true,
-                tsconfig: path.resolve(appRoot, appConfig.tsconfig)
-              }
-            }, {
-              loader: 'angular2-template-loader'
-            }
-          ],
-          exclude: [/\.(spec|e2e)\.ts$/]
-        },
+        // TypeScript loaders are separated into webpack-build-typescript.
 
         // in main, load css as raw text
         {
@@ -115,16 +98,14 @@ export function getWebpackCommonConfig(
 
         { test: /\.json$/, loader: 'json-loader' },
         { test: /\.(jpg|png|gif)$/, loader: 'url-loader?limit=10000' },
-        { test: /\.html$/, loader: 'raw-loader' },
+        { test: /\.html$/, loader: 'html-loader' },
 
         { test: /\.(otf|woff|ttf|svg)$/, loader: 'url?limit=10000' },
         { test: /\.woff2$/, loader: 'url?limit=10000&mimetype=font/woff2' },
         { test: /\.eot$/, loader: 'file' }
       ]
     },
     plugins: [
-      new webpack.ContextReplacementPlugin(/.*/, appRoot, lazyModules),
-      new atl.ForkCheckerPlugin(),
       new HtmlWebpackPlugin({
         template: path.resolve(appRoot, appConfig.index),
         chunksSortMode: 'dependency'

packages/angular-cli/models/webpack-build-typescript.ts

@@ -0,0 +1,63 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+import {findLazyModules} from './find-lazy-modules';
+import {NgcWebpackPlugin} from '@ngtools/webpack';
+
+const atl = require('awesome-typescript-loader');
+
+const g: any = global;
+const webpackLoader: string = g['angularCliIsLocal']
+  ? g.angularCliPackages['@ngtools/webpack'].main
+  : '@ngtools/webpack';
+
+
+export const getWebpackNonAotConfigPartial = function(projectRoot: string, appConfig: any) {
+  const appRoot = path.resolve(projectRoot, appConfig.root);
+  const lazyModules = findLazyModules(appRoot);
+
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.ts$/,
+          loaders: [{
+            loader: 'awesome-typescript-loader',
+            query: {
+              useForkChecker: true,
+              tsconfig: path.resolve(appRoot, appConfig.tsconfig)
+            }
+          }, {
+            loader: 'angular2-template-loader'
+          }],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        }
+      ],
+    },
+    plugins: [
+      new webpack.ContextReplacementPlugin(/.*/, appRoot, lazyModules),
+      new atl.ForkCheckerPlugin(),
+    ]
+  };
+};
+
+export const getWebpackAotConfigPartial = function(projectRoot: string, appConfig: any) {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.ts$/,
+          loader: webpackLoader,
+          exclude: [/\.(spec|e2e)\.ts$/]
+        }
+      ]
+    },
+    plugins: [
+      new NgcWebpackPlugin({
+        project: path.resolve(projectRoot, appConfig.root, appConfig.tsconfig),
+        baseDir: path.resolve(projectRoot, ''),
+        entryModule: path.join(projectRoot, appConfig.root, 'app/app.module#AppModule'),
+        genDir: path.join(projectRoot, appConfig.outDir, 'ngfactory')
+      }),
+    ]
+  };
+};