Angular 5: Extract i18n and create messages.xlf without angular-cli

Question

I'm currently working on an angular 4.4 project that was created with but ejected from angular-cli. In our webpack.config, we use AOTPlugin and ExtractI18nPlugin from @ngtools/webpack to use angulars Ahead of Time compiling and extract the messages.xlf based on our i18n-Html-Attributes. The messages.xlf gets updated every time we run our build task with this webpack config.

After updating to Angular 5.2.1, we replaced AOTPlugin with AngularCompilerPlugin as described in the Readme for @ngtools/webpack: https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack. Works perfectly fine.

However, there is no mention on how to migrate from the ExtractI18nPlugin, which also seems to be deprecated. If we leave it in our webpack.config, the build task fails with the error message: Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+. Of course, all our dependencies are up to date and have been completely reinstalled several times (including the angular-cli, which we don't use for our build task)

The new AngularCompilerPlugin has some options regarding i18n defined in the interface AngularCompilerPluginOptions:

  ...
  i18nInFile?: string;
  i18nInFormat?: string;
  i18nOutFile?: string;
  i18nOutFormat?: string;
  locale?: string;
  ...

https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L57

But they (seem to) have no effect and there is no documentation on how to use them.

While looking for a solution, I found this example project demonstrating our current scenario, but it only worked until the angular 5 beta. Now there is an github issue describing our exact problem: https://github.com/ocombe/i18n-demo-no-cli

Any ideas on how to get our i18n extraction running again with angular 5.X?

Answer 1

Found a solution: The AngularCompilerPlugin skips the i18n-extraction if the option skipCodeGeneration (which disables AOT-Compiling) is set to true.

Our working configuration for i18n extraction now looks like this:

new AngularCompilerPlugin({
  mainPath: 'src/main.ts',
  i18nOutFile: path.join('src', 'i18n', 'messages.xlf'),
  i18nOutFormat: 'xlf',
  locale: 'en',
  sourceMap: true,
  tsConfigPath: 'tsconfig.json',
  skipCodeGeneration: false,
  compilerOptions: {}
})