What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular’s translation-file workflow has five stages: mark source text for localization, extract those messages with ng extract-i18n, make a file for each locale, translate it without changing placeholders or ICU expressions, then configure and build localized app variants. Angular supports ARB, JSON, XLIFF, and XMB/XTB; the CLI’s default extraction format is XLIFF.
1. Mark the text Angular should translate
Angular extracts messages that you explicitly mark in source code:
As an Amazon Associate I earn from qualifying purchases.
- Use
i18non template text. - Use an
i18n-marker on a translatable template attribute. - Use
$localizefor strings in code.
Extraction collects marked messages, not every string in the application. See Angular’s translation-file guide.
2. Extract the source messages
From the Angular workspace root, run:
ng extract-i18nThe default output is messages.xlf. Use the CLI options to choose a different format, filename, or output directory:
#1 Best Overall
--formatselects the translation-file format.--out-fileselects the output filename.--output-pathselects the output directory.
Check the CLI reference for supported option values and aliases. Angular’s internationalization overview also describes extraction as part of its localization workflow.
3. Choose a format your localization workflow accepts
Angular’s translation-file guide lists these formats. The CLI reference gives xlf as the default format and accepts additional spellings and aliases, including xlif, xliff, and xliff2.
| Format | File extension | Practical consideration |
|---|---|---|
| ARB | .arb |
Choose it if the translation workflow accepts ARB and its message structure and metadata suit the project. |
| JSON | .json |
Choose it if the tools and conventions in your workflow accept JSON. |
| XLIFF 1.2 | .xlf |
Angular’s guide uses this format in its translation-file example. |
| XLIFF 2 | .xlf |
Confirm that the receiving editor or translation service supports the version your team selects. |
| XMB source format | .xmb |
Angular uses .xtb for the corresponding translation files. |
Angular does not rank these formats by quality or features. Select one based on compatibility with the translation service or editor, the message structure and metadata the workflow needs, and the project’s existing conventions. See the format list and CLI format options.
4. Create and translate a file for each locale
Keep the extracted source as the basis for locale-specific copies. Name and store each copy according to your project’s conventions; Angular’s guide uses messages.fr.xlf as an example. Send each file through your translation workflow, whether that means editing it directly or using an XLIFF-capable editor.
Rank #3
Preserve placeholders and expressions
Placeholders carry structural meaning. Translators can change the wording and order around them, but should preserve the placeholders required by the message. Take particular care with ICU plural and select expressions, including nested expressions. Angular’s example shows that removing an ICU placeholder removes that expression from the translated application. Review translated files for missing or altered placeholders before using them in a build.
5. Add localization support and configure locale files
If the project does not yet have Angular localization support, add it from the workspace root:
ng add @angular/localizeAngular documents that this command updates package and TypeScript configuration. Then configure the locale translation files in the Angular workspace and use the localize build option to produce localized application variants. Follow Angular’s instructions for adding the localize package and merging translations into the app.
Choose when translations enter the application
Angular supports build-time merging of translation files into localized app variants and runtime loading of translations for $localize. The right approach depends on how your deployments need to deliver locales; Angular’s documentation explains the mechanics but does not prescribe a universal choice.
| Approach | When translations are applied | What to account for |
|---|---|---|
| Build-time localized variants | Translations are merged as localized application variants are built. | Configure locale files and build with the localize option; deployments serve the resulting localized variants. |
Runtime $localize loading |
Translations are loaded while the application runs. | Angular processes a message when it is first encountered. Loading a new translation later does not change messages already translated during that application lifecycle. |
For the runtime behavior, see Angular’s loadTranslations API reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
