feat(@ngtools/webpack): add AngularCompilerPlugin

Author: filipesilva

package-lock.json

@@ -176,6 +176,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 experimental AOT Compiler. This flag is experimental and will go away.',
+    default: false
   }
 ];
 

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

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

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

@@ -133,7 +133,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/common.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,27 @@ 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) {
+    if (!AngularCompilerPlugin.isSupported()) {
+      throw new Error('You need Angular 5 and up to use --experimentalAngularCompiler.');
+    }
+    return new AngularCompilerPlugin(pluginOptions);
+  } else {
+    return new AotPlugin(pluginOptions);
+  }
 }
 
 export const getNonAotConfig = function(wco: WebpackConfigOptions) {

packages/@angular/cli/models/webpack-configs/typescript.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';
 
@@ -212,6 +212,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';