Back to course

Internationalization (i18n) basics

The Complete Angular Developer: From Zero to Hero

78. Internationalization (i18n) Basics

Internationalization (i18n) is the process of designing an application so that it can be adapted to various languages and regions without requiring engineering changes. Angular provides robust tooling for this.

Key Concepts

  1. Localization (l10n): The process of adapting the application for a specific locale (e.g., German, French-Canadian).
  2. Locale: A combination of language and region (e.g., en-US, fr-CA).
  3. Translation Files: Files containing key-value pairs mapping source text to translated text (e.g., XLIFF, JSON).

Marking Text for Translation

Angular's built-in i18n support relies on the i18n attribute to identify translatable elements.

html

Welcome to the App

Hello, {{ username }}!

Extraction and Translation

  1. Extraction: The CLI extracts all marked text into a source translation file: bash ng extract-i18n --output-path src/locale

  2. Translation: Translators provide localized files (e.g., messages.fr.xlf, messages.ar.xlf).

Serving the Localized App

Angular requires a separate build for each language, which is configured in angular.json.

bash

Build for French language, using the French translation file

ng build --configuration=production-fr

Note on RTL (Right-to-Left): For languages like Arabic (ar), the build configuration must be adapted, often by providing an RTL-specific CSS file that Angular loads conditionally. Angular components support this naturally.