feat(@ngtools/webpack): add AngularCompilerPlugin

.appveyor.yml

@@ -18,4 +18,4 @@ test_script:
 build: off
 
 cache:
-  - node_modules
+  - node_modules -> package-lock.json

packages/@angular/cli/commands/build.ts

@@ -2,6 +2,7 @@ import { CliConfig } from '../models/config';
 import { BuildOptions } from '../models/build-options';
 import { Version } from '../upgrade/version';
 import { oneLine } from 'common-tags';
+import { AngularCompilerPlugin } from '@ngtools/webpack';
 
 const Command = require('../ember-cli/lib/models/command');
 
@@ -176,6 +177,13 @@ export const baseBuildCommandOptions: any = [
     aliases: ['nc'],
     description: 'Use file name for lazy loaded chunks.',
     default: buildConfigDefaults['namedChunks']
+  },
+  {
+    name: 'experimental-angular-compiler',
+    type: Boolean,
+    aliases: ['eac'],
+    description: 'Use new Angular Compiler (Angular version 5 and greater only).',
+    default: AngularCompilerPlugin.isSupported()
   }
 ];
 

packages/@angular/cli/models/build-options.ts

@@ -25,4 +25,5 @@ export interface BuildOptions {
   showCircularDependencies?: boolean;
   buildOptimizer?: boolean;
   namedChunks?: boolean;
+  experimentalAngularCompiler?: boolean;
 }

packages/@angular/cli/models/webpack-config.ts

@@ -12,6 +12,7 @@ import {
   getAotConfig
 } from './webpack-configs';
 import * as path from 'path';
+import { AngularCompilerPlugin } from '@ngtools/webpack';
 
 export interface WebpackConfigOptions {
   projectRoot: string;
@@ -78,6 +79,10 @@ export class NgCliWebpackConfig {
       && !(buildOptions.aot || buildOptions.target === 'production')) {
       throw new Error('The `--build-optimizer` option cannot be used without `--aot`.');
     }
+
+    if (buildOptions.experimentalAngularCompiler && !AngularCompilerPlugin.isSupported()) {
+      throw new Error('You need Angular 5 and up to use --experimental-angular-compiler.');
+    }
   }
 
   // Fill in defaults for build targets

packages/@angular/cli/models/webpack-configs/common.ts

@@ -168,7 +168,9 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     },
     module: {
       rules: [
-        { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: [nodeModules] },
+        { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: [
+          nodeModules, /\.ngfactory\.js$/, /\.ngstyle\.js$/
+        ] },
         { test: /\.html$/, loader: 'raw-loader' },
         { test: /\.(eot|svg|cur)$/, loader: `file-loader?name=[name]${hashFormat.file}.[ext]` },
         {

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -1,6 +1,6 @@
 import * as path from 'path';
 import { stripIndent } from 'common-tags';
-import {AotPlugin} from '@ngtools/webpack';
+import { AotPlugin, AngularCompilerPlugin } from '@ngtools/webpack';
 import { WebpackConfigOptions } from '../webpack-config';
 
 const SilentError = require('silent-error');
@@ -63,17 +63,24 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
     };
   }
 
-  return new AotPlugin(Object.assign({}, {
-      mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
-      i18nFile: buildOptions.i18nFile,
-      i18nFormat: buildOptions.i18nFormat,
-      locale: buildOptions.locale,
-      replaceExport: appConfig.platform === 'server',
-      missingTranslation: buildOptions.missingTranslation,
-      hostReplacementPaths,
-      // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
-      exclude: []
-    }, options));
+  const pluginOptions = Object.assign({}, {
+    mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
+    i18nFile: buildOptions.i18nFile,
+    i18nFormat: buildOptions.i18nFormat,
+    locale: buildOptions.locale,
+    replaceExport: appConfig.platform === 'server',
+    missingTranslation: buildOptions.missingTranslation,
+    hostReplacementPaths,
+    sourceMap: buildOptions.sourcemaps,
+    // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
+    exclude: []
+  }, options);
+
+  if (wco.buildOptions.experimentalAngularCompiler && !options.skipCodeGeneration) {
+    return new AngularCompilerPlugin(pluginOptions);
+  } else {
+    return new AotPlugin(pluginOptions);
+  }
 }
 
 export const getNonAotConfig = function(wco: WebpackConfigOptions) {

packages/@angular/cli/models/webpack-xi18n-config.ts

@@ -24,7 +24,8 @@ export class XI18nWebpackConfig extends NgCliWebpackConfig {
     super({
       target: 'development',
       verbose: extractOptions.verbose,
-      progress: extractOptions.progress
+      progress: extractOptions.progress,
+      experimentalAngularCompiler: false,
     }, appConfig);
     super.buildConfig();
   }

packages/@angular/cli/tasks/eject.ts

@@ -7,7 +7,7 @@ import { getAppFromConfig } from '../utilities/app-utils';
 import { EjectTaskOptions } from '../commands/eject';
 import { NgCliWebpackConfig } from '../models/webpack-config';
 import { CliConfig } from '../models/config';
-import { AotPlugin } from '@ngtools/webpack';
+import { AotPlugin, AngularCompilerPlugin } from '@ngtools/webpack';
 import { yellow } from 'chalk';
 import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 
@@ -213,6 +213,10 @@ class JsonWebpackSerializer {
           args = this._aotPluginSerialize(plugin);
           this._addImport('@ngtools/webpack', 'AotPlugin');
           break;
+        case AngularCompilerPlugin:
+          args = this._aotPluginSerialize(plugin);
+          this._addImport('@ngtools/webpack', 'AngularCompilerPlugin');
+          break;
         case HtmlWebpackPlugin:
           args = this._htmlWebpackPlugin(plugin);
           this.variableImports['html-webpack-plugin'] = 'HtmlWebpackPlugin';

packages/@ngtools/webpack/README.md

@@ -29,15 +29,18 @@ exports = { /* ... */
 
 The loader works with the webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.
 
+For Angular version 5 and up, import `AngularCompilerPlugin` instead of `AotPlugin`.
+
 ## Options
 
 * `tsConfigPath`. The path to the `tsconfig.json` file. This is required. In your `tsconfig.json`, you can pass options to the Angular Compiler with `angularCompilerOptions`.
 * `basePath`. Optional. The root to use by the compiler to resolve file paths. By default, use the `tsConfigPath` root.
 * `entryModule`. Optional if specified in `angularCompilerOptions`. The path and classname of the main application module. This follows the format `path/to/file#ClassName`.
 * `mainPath`. Optional if `entryModule` is specified. The `main.ts` file containing the bootstrap code. The plugin will use AST to determine the `entryModule`.
-* `skipCodeGeneration`. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources.
-* `typeChecking`. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack.
+* `skipCodeGeneration`. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources. Only available in `AotPlugin`.
+* `typeChecking`. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack. Only available in `AotPlugin`.
 * `exclude`. Optional. Extra files to exclude from TypeScript compilation.
+* `sourceMap`. Optional. Include sourcemaps.
 * `compilerOptions`. Optional. Override options in `tsconfig.json`.
 
 ## Features