Add JIT support for AngularCompilerPlugin

package.json

@@ -89,6 +89,7 @@
     "style-loader": "^0.13.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "tree-kill": "^1.0.0",
     "typescript": "~2.4.2",
     "uglifyjs-webpack-plugin": "1.0.0-beta.1",
     "url-loader": "^0.5.7",
@@ -138,7 +139,6 @@
     "tar": "^3.1.5",
     "temp": "0.8.3",
     "through": "^2.3.6",
-    "tree-kill": "^1.0.0",
     "ts-node": "^3.2.0",
     "tslint": "^5.1.0",
     "walk-sync": "^0.3.1"

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

@@ -12,6 +12,8 @@ export interface BuildOptions {
   progress?: boolean;
   i18nFile?: string;
   i18nFormat?: string;
+  i18nOutFile?: string;
+  i18nOutFormat?: string;
   locale?: string;
   missingTranslation?: string;
   extractCss?: boolean;

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

@@ -1,6 +1,12 @@
 import * as path from 'path';
 import { stripIndent } from 'common-tags';
-import { AotPlugin, AngularCompilerPlugin } from '@ngtools/webpack';
+import {
+  AotPlugin,
+  AotPluginOptions,
+  AngularCompilerPlugin,
+  AngularCompilerPluginOptions,
+  PLATFORM
+} from '@ngtools/webpack';
 import { WebpackConfigOptions } from '../webpack-config';
 
 const SilentError = require('silent-error');
@@ -67,22 +73,35 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
     };
   }
 
-  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) {
+if (wco.buildOptions.experimentalAngularCompiler) {
+    const pluginOptions: AngularCompilerPluginOptions = Object.assign({}, {
+      mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
+      i18nInFile: buildOptions.i18nFile,
+      i18nInFormat: buildOptions.i18nFormat,
+      i18nOutFile: buildOptions.i18nOutFile,
+      i18nOutFormat: buildOptions.i18nOutFormat,
+      locale: buildOptions.locale,
+      platform: appConfig.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
+      missingTranslation: buildOptions.missingTranslation,
+      hostReplacementPaths,
+      sourceMap: buildOptions.sourcemaps,
+      // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
+      exclude: []
+    }, options);
     return new AngularCompilerPlugin(pluginOptions);
   } else {
+    const pluginOptions: AotPluginOptions = 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);
     return new AotPlugin(pluginOptions);
   }
 }

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

@@ -14,6 +14,7 @@ export interface XI18WebpackOptions {
   verbose?: boolean;
   progress?: boolean;
   app?: string;
+  experimentalAngularCompiler?: boolean;
 }
 export class XI18nWebpackConfig extends NgCliWebpackConfig {
 
@@ -25,24 +26,31 @@ export class XI18nWebpackConfig extends NgCliWebpackConfig {
       target: 'development',
       verbose: extractOptions.verbose,
       progress: extractOptions.progress,
-      experimentalAngularCompiler: false,
+      experimentalAngularCompiler: extractOptions.experimentalAngularCompiler,
+      locale: extractOptions.locale,
+      i18nOutFormat: extractOptions.i18nFormat,
+      i18nOutFile: extractOptions.outFile,
+      aot: extractOptions.experimentalAngularCompiler
     }, appConfig);
     super.buildConfig();
   }
 
   public buildConfig() {
-    const configPath = CliConfig.configFilePath();
-    const projectRoot = path.dirname(configPath);
-
-    const extractI18nConfig =
-      getWebpackExtractI18nConfig(projectRoot,
-        this.appConfig,
-        this.extractOptions.genDir,
-        this.extractOptions.i18nFormat,
-        this.extractOptions.locale,
-        this.extractOptions.outFile);
-
-    this.config = webpackMerge([this.config, extractI18nConfig]);
+    // The extra extraction config is only needed in Angular 2/4.
+    if (!this.extractOptions.experimentalAngularCompiler) {
+      const configPath = CliConfig.configFilePath();
+      const projectRoot = path.dirname(configPath);
+
+      const extractI18nConfig =
+        getWebpackExtractI18nConfig(projectRoot,
+          this.appConfig,
+          this.extractOptions.genDir,
+          this.extractOptions.i18nFormat,
+          this.extractOptions.locale,
+          this.extractOptions.outFile);
+
+      this.config = webpackMerge([this.config, extractI18nConfig]);
+    }
     return this.config;
   }
 }

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

@@ -122,7 +122,7 @@ class JsonWebpackSerializer {
     const basePath = path.dirname(tsConfigPath);
     return Object.assign({}, value.options, {
       tsConfigPath,
-      mainPath: path.relative(value.basePath, value.options.mainPath),
+      mainPath: path.relative(basePath, value.options.mainPath),
       hostReplacementPaths: Object.keys(value.options.hostReplacementPaths)
         .reduce((acc: any, key: string) => {
           const replacementPath = value.options.hostReplacementPaths[key];
@@ -132,7 +132,7 @@ class JsonWebpackSerializer {
         }, {}),
       exclude: Array.isArray(value.options.exclude)
         ? value.options.exclude.map((p: any) => {
-          return p.startsWith('/') ? path.relative(value.basePath, p) : p;
+          return p.startsWith('/') ? path.relative(basePath, p) : p;
         })
         : value.options.exclude
     });

packages/@angular/cli/tasks/extract-i18n.ts

@@ -1,4 +1,6 @@
+import { join } from 'path';
 import * as webpack from 'webpack';
+import { AngularCompilerPlugin } from '@ngtools/webpack';
 import { XI18nWebpackConfig } from '../models/webpack-xi18n-config';
 import { getAppFromConfig } from '../utilities/app-utils';
 
@@ -9,16 +11,25 @@ const MemoryFS = require('memory-fs');
 export const Extracti18nTask = Task.extend({
   run: function (runTaskOptions: any) {
     const appConfig = getAppFromConfig(runTaskOptions.app);
+    const experimentalAngularCompiler = AngularCompilerPlugin.isSupported();
+
+    // We need to determine the outFile name so that AngularCompiler can retrieve it.
+    let outFile = runTaskOptions.outFile || getI18nOutfile(runTaskOptions.i18nFormat);
+    if (experimentalAngularCompiler && runTaskOptions.outputPath) {
+      // AngularCompilerPlugin doesn't support genDir so we have to adjust outFile instead.
+      outFile = join(runTaskOptions.outputPath, outFile);
+    }
 
     const config = new XI18nWebpackConfig({
       genDir: runTaskOptions.outputPath || appConfig.root,
       buildDir: '.tmp',
       i18nFormat: runTaskOptions.i18nFormat,
       locale: runTaskOptions.locale,
-      outFile: runTaskOptions.outFile,
+      outFile: outFile,
       verbose: runTaskOptions.verbose,
       progress: runTaskOptions.progress,
       app: runTaskOptions.app,
+      experimentalAngularCompiler,
     }, appConfig).buildConfig();
 
     const webpackCompiler = webpack(config);
@@ -47,3 +58,18 @@ export const Extracti18nTask = Task.extend({
     });
   }
 });
+
+function getI18nOutfile(format: string) {
+  switch (format) {
+    case 'xmb':
+      return 'messages.xmb';
+    case 'xlf':
+    case 'xlif':
+    case 'xliff':
+    case 'xlf2':
+    case 'xliff2':
+      return 'messages.xlf';
+    default:
+      throw new Error(`Unsupported format "${format}"`);
+  }
+}

packages/@ngtools/webpack/package.json

@@ -25,9 +25,12 @@
     "npm": ">= 3.0.0"
   },
   "dependencies": {
+    "tree-kill": "^1.0.0",
+    "chalk": "^2.0.1",
     "loader-utils": "^1.0.2",
     "enhanced-resolve": "^3.1.0",
     "magic-string": "^0.22.3",
+    "semver": "^5.3.0",
     "source-map": "^0.5.6"
   },
   "peerDependencies": {