iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s translation-file workflow has three main stages: mark translatable source text, extract it with ng extract-i18n, then translate the extracted messages and merge locale files into localized builds. The key to a reliable handoff is to keep message placeholders and ICU expressions intact.
Prepare Angular to localize your application
Add Angular’s localization support from the workspace root:
ng add @angular/localizeAngular says this command updates the package and TypeScript configuration. See the Angular localization package setup guide.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsMark the text Angular should extract
Angular extracts messages that are explicitly marked as translatable. Use i18n on template text, i18n- markers on translatable attributes, and $localize for strings in code. Unmarked text is not part of this extraction workflow.
#1 Best Overall
Extract messages into a translation file
From the Angular workspace root, run:
ng extract-i18nThe default output is messages.xlf. The CLI lets you choose a file format, output filename, and output directory:
ng extract-i18n --format=arb --out-file=messages.arb --output-path=src/localeHere, --format selects the format, --out-file sets the filename, and --output-path sets the directory. The CLI reference documents these options and the default xlf format in its ng extract-i18n reference.
Choose a format your localization workflow can handle
Angular’s translation-file guide lists ARB (.arb), JSON (.json), XLIFF 1.2 (.xlf), XLIFF 2 (.xlf), and XMB (.xmb; translated files use .xtb). The CLI also accepts format spellings and aliases such as xlif, xliff, and xliff2.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Format | Extensions shown in Angular’s guide | Practical consideration |
|---|---|---|
| ARB | .arb |
Use it if your translation workflow accepts ARB. |
| JSON | .json |
Use it if your workflow expects JSON translation files. |
| XLIFF 1.2 | .xlf |
Check which XLIFF version your translation service or editor supports. |
| XLIFF 2 | .xlf |
Check version compatibility; the extension alone does not distinguish it from XLIFF 1.2. |
| XMB | .xmb for source; .xtb for translations |
Account for the different source and translated-file extensions in your handoff. |
Angular does not rank these formats by quality or features. Choose one that your translator or localization tool can process and that fits the project’s conventions and metadata needs. For the supported formats and extraction flow, see Angular’s translation-file guide and its internationalization overview.
Rank #3
Create locale files and preserve message structure
Make a locale-specific copy of the extracted source file for each target language or locale, using your project’s naming and storage conventions. Angular’s guide uses messages.fr.xlf as an example for French. Send the locale file through your translation workflow, then keep the translated file associated with that locale when configuring the workspace.
Do not remove structural placeholders while translating. They represent values or expressions that Angular needs to reconstruct the message. Pay particular attention to ICU plural and select expressions, including nested expressions: Angular’s example shows that deleting an ICU placeholder also removes the corresponding expression from the translated application. A translation can change the wording around an expression, but it must retain the structure needed for the message to work.
Build localized application variants
Configure locale files in the Angular workspace, then use the localize build option to merge the translations into localized application variants. This is Angular’s documented build-time workflow; the guide to merging translations describes the configuration and build process.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Decide whether translations arrive at build time or runtime
Angular supports both merging locale files into localized builds and loading translations at runtime for $localize. The choice depends on deployment needs: build-time merging produces localized application variants, while runtime loading makes translations available through the application’s running lifecycle.
For runtime loading, Angular provides the loadTranslations API. Its important limitation is timing: messages are processed only when first encountered, and loading a different translation later does not change messages that have already been translated during that application lifecycle. Plan runtime loading so the needed translations are present before those messages are first processed. See the loadTranslations API reference.
Quick Recap
Check the handoff before building
- Confirm that translatable template text, attributes, and code strings have the appropriate Angular markers.
- Confirm the extraction command’s format and output path match the localization workflow.
- Keep a distinct translated file for each locale, following the project’s naming conventions.
- Check that placeholders and ICU expressions remain intact in translated messages.
- Make sure workspace locale configuration points to the intended files before building localized variants.
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.
