How to use Angular i18n with the built in @angular/localize and XLF

1. Let’s start! Add the localize package

ng add @angular/localize

2. Start marking translations

Format:<element i18n=”{meaning}|{description}@@{id}”>Your text</element>Example:<h1 i18n=”{auth login headline|A warm welcome for the login screen@@authLoginHeadline”>Welcome!</h1>
  • meaning: provide info about the meaning and intent
  • description: ability to add context or additional information
  • id: unique identifier

3. Generate translation source files

ng extract-i18n — output-path src/locale

Tip: use npm scripts

“translate”: “ng extract-i18n — output-path src/locale”,

4. Translate your app

What?! i18n translation process with Angular’s XLF/XLIFF files
  1. Open What?!
  2. Throw in your translation source file `src/locale/messages.xlf`
  3. Translate the app to the targetted language
  4. Press ‘Download’ when you are done and save it to `src/locale/messages.[lang code].xlf` (replace lang code with your language code, ex. nl or fr)

5. Configuration of Angular

"i18n": {  "sourceLocale": "en-US",  "locales": {    "nl": {      "translation": "src/locale/"    }  }},
"nl": {  "localize": [    "nl"  ]},
"nl": {  "browserTarget": "project-name:build:development,nl"},

6. Party time!

Production build

Serve development

“start”: “npm run start:nl”,“start:nl”: “ng serve — configuration=nl”,“start:en”: “ng serve”,

What’s next?

That’s it!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tim etc.

Tim etc.

Creator of digital things. JavaScript Consultant at Passionate People.