feat(@angular/cli): support xi18n with Angular 5

Author: filipesilva

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) {
+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/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/src/angular_compiler_plugin.ts

@@ -56,19 +56,21 @@ export interface AngularCompilerPluginOptions {
   skipCodeGeneration?: boolean;
   hostOverrideFileSystem?: { [path: string]: string };
   hostReplacementPaths?: { [path: string]: string };
-  i18nFile?: string;
-  i18nFormat?: string;
+  i18nInFile?: string;
+  i18nInFormat?: string;
+  i18nOutFile?: string;
+  i18nOutFormat?: string;
   locale?: string;
   missingTranslation?: string;
-  replaceExport?: boolean;
+  platform?: PLATFORM;
 
   // Use tsconfig to include path globs.
   exclude?: string | string[];
   include?: string[];
   compilerOptions?: ts.CompilerOptions;
 }
 
-enum PLATFORM {
+export enum PLATFORM {
   Browser,
   Server
 }
@@ -230,11 +232,17 @@ export class AngularCompilerPlugin implements Tapable {
     }
 
     // Process i18n options.
-    if (options.hasOwnProperty('i18nFile')) {
-      this._angularCompilerOptions.i18nInFile = options.i18nFile;
+    if (options.hasOwnProperty('i18nInFile')) {
+      this._angularCompilerOptions.i18nInFile = options.i18nInFile;
     }
-    if (options.hasOwnProperty('i18nFormat')) {
-      this._angularCompilerOptions.i18nInFormat = options.i18nFormat;
+    if (options.hasOwnProperty('i18nInFormat')) {
+      this._angularCompilerOptions.i18nInFormat = options.i18nInFormat;
+    }
+    if (options.hasOwnProperty('i18nOutFile')) {
+      this._angularCompilerOptions.i18nOutFile = options.i18nOutFile;
+    }
+    if (options.hasOwnProperty('i18nOutFormat')) {
+      this._angularCompilerOptions.i18nOutFormat = options.i18nOutFormat;
     }
     if (options.hasOwnProperty('locale') && options.locale) {
       this._angularCompilerOptions.i18nInLocale = this._validateLocale(options.locale);
@@ -273,8 +281,7 @@ export class AngularCompilerPlugin implements Tapable {
       }
     }
 
-    // TODO: consider really using platform names in the plugin options.
-    this._platform = options.replaceExport ? PLATFORM.Server : PLATFORM.Browser;
+    this._platform = options.platform || PLATFORM.Browser;
     timeEnd('AngularCompilerPlugin._setupOptions');
   }
 
@@ -722,6 +729,24 @@ export class AngularCompilerPlugin implements Tapable {
       });
   }
 
+  writeI18nOutFile() {
+    function _recursiveMkDir(p: string): Promise<void> {
+      if (fs.existsSync(p)) {
+        return Promise.resolve();
+      } else {
+        return _recursiveMkDir(path.dirname(p))
+          .then(() => fs.mkdirSync(p));
+      }
+    }
+
+    // Write the extracted messages to disk.
+    const i18nOutFilePath = path.resolve(this._basePath, this._angularCompilerOptions.i18nOutFile);
+    const i18nOutFileContent = this._compilerHost.readFile(i18nOutFilePath);
+    if (i18nOutFileContent) {
+      _recursiveMkDir(path.dirname(i18nOutFilePath))
+        .then(() => fs.writeFileSync(i18nOutFilePath, i18nOutFileContent));
+    }
+  }
 
   getFile(fileName: string) {
     const outputFile = fileName.replace(/.ts$/, '.js');
@@ -792,8 +817,13 @@ export class AngularCompilerPlugin implements Tapable {
 
         if (!hasErrors(allDiagnostics)) {
           time('AngularCompilerPlugin._emit.ng.emit');
-          emitResult = angularProgram.emit({ emitFlags: EmitFlags.Default, customTransformers });
+          const extractI18n = !!this._angularCompilerOptions.i18nOutFile;
+          const emitFlags = extractI18n ? EmitFlags.I18nBundle : EmitFlags.Default;
+          emitResult = angularProgram.emit({ emitFlags, customTransformers });
           allDiagnostics.push(...emitResult.diagnostics);
+          if (extractI18n) {
+            this.writeI18nOutFile();
+          }
           timeEnd('AngularCompilerPlugin._emit.ng.emit');
         }
       }