One warning about scope: full human translation and machine translation sit at opposite ends of that budget, and the middle path — machine-translate, then review — only works if the review is real. Machine output on ICU plurals is frequently wrong in exactly the languages that need the plural branches most, and the glossary that keeps your product’s nouns consistent does not exist until someone writes it. Whatever the pipeline, keep one canonical term list per locale inside the Angular i18n workflow, so “workspace” is the same word in the navigation, the settings page and the error message.

Angular i18n Overview

Message Extraction and XLF Files

Hello, {fullName}!

Translation Management Workflow

  • Run ng extract-i18n --configuration production to generate the base XLF file.
  • Send the XLF file to the translation service or team.
  • Receive translated XLF files and place them in the src/locale directory.
  • Build for each locale: ng build --configuration production --localize=fr, ng build --configuration production --localize=es, etc.
  • Deploy each locale to its URL prefix: /fr/, /es/, etc.
  • Verify hreflang annotations are present in each locale’s HTML.

ICU Plural and Gender Syntax

{count, plural, =1 {one item} other {{count} items}}

Date, Number and Currency Formatting

The event is on {eventDate, date, medium}

Runtime Language Switching

// app.component.ts constructor(public translocoService: TranslocoService) {}switchLanguage(lang: string) { this.translocoService.setActiveLang(lang); // Persist the choice localStorage.setItem('language', lang); }// app.html // transloco.config.json { "availableLangs": ["en", "fr", "es"], "defaultLang": "en", "pathPrefix": "/:lang" }

SEO and Hreflang Considerations

For related reading, see also: Angular Change Detection (zoneless/OnPush), Angular NgRx State Management, Angular PWA Guide, Angular i18n Guide, Angular CDK Guide, ICU Documentation, Angular i18n Guide, MDN Localization, Crowdin i18n.

Angular i18n message extraction: i18n attributes on template elements, XLF file generation, message IDs and placeholders.
Angular i18n XLF file structure: stable message IDs, source text, placeholder names, and translation entries.
Angular i18n ICU plural syntax: plural categories per language, gendered forms, and example output for French and German locales.
Angular i18n date and currency formatting: locale-specific patterns for medium date, EUR currency, and US/German number formatting.
Angular i18n workflow: extract, translate, review, build per locale, and deploy with hreflang annotations.
Angular i18n runtime switching: Transloco or ngx-translate loading JSON on demand with language switcher UI.
Angular i18n hreflang annotations: HTML head links with language prefixes and URLs for each locale bundle.
Angular i18n gender syntax: male/female/other forms for French, Spanish, German, and Arabic locales.

Quick answer: Angular i18n extracts strings to XLF at build time, builds per-locale bundles under language prefixes, and generates crawlable URLs with hreflang. Runtime switching requires Transloco or ngx-translate. ICU syntax handles plural and gender rules per language.

Last updated on · Written by

Leave A Comment

Keep reading