Using the AoT Compiler

To Internationalize with the AoT (Ahead of time) compiler, you will have to:

  • pre-build a separate application package for each language

  • determine which language the user needs

  • serve the appropriate application package

Refer to the AoT docs for more details on AoT.

Once your ready, you can setup a configuration per locale to translate - for French it could look like this:

"build": {
  ...
  "configurations": {
    ...
    "fr": {
      "aot": true,
      "outputPath": "dist/my-project-fr/",
      "i18nFile": "src/locale/messages.fr.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "fr",
      "i18nMissingTranslation": "error",
      ...
    }
  }
},
"serve": {
  ...
  "configurations": {
    ...
    "fr": {
      "browserTarget": "*project-name*:build:fr"
    }
  }
}

Alternatively you can use the following 3 options with the ng build compile command:

  • --i18nFile: the path to the translation file

  • --i18nLocale: the id of the locale

  • --i18nFormat: the format of the localization file

For example, the French language config above the command would look something like this:

./node_modules/.bin/ng build --i18nFile=./locale/messages.fr.xlf --i18nLocale=fr --i18nFormat=xlf --i18nMissingTranslation=error

Additionally there is a --i18nMissingTranslation flag that controls how to handle missing translations, this is particular useful for a CI step, to ensure all strings of a new feature have been translated.

Last updated