Tag: Angular i18n

If you find this story helpful, feel free to like or share it with others who might benefit!

---

Let me take you on a journey to an enchanted forest, where each tree represents a different language, and the forest itself is the magical world of an Angular application. As I wander through this forest, my mission is to make sure everyone understands the whispers of the wind, no matter what tree they stand under. This is the essence of internationalization, or i18n, in Angular.

In this forest, I am the wise guide who prepares the language scrolls, which are akin to translation files. Each scroll contains the secrets of the language for a particular tree, ensuring that whoever visits can understand the rustling leaves. The trees, in turn, are like components of my Angular app, each with messages and labels that need translating.

To start, I gather the core essence of the language, the source text, from the central tree—the tree that speaks the default language. This is done using Angular’s i18n tools, which help extract these messages into a format that can be understood by translators, like creating a blueprint for each tree’s voice.

Once I have these scrolls, I share them with the mystical translators who craft versions for each language tree. These translations are then carefully placed back into the forest, ready to be picked up by those who need them.

To make sure every visitor hears the right whispers, I use Angular’s powerful tools to switch scrolls based on the visitor’s choice. This involves configuring my Angular app to load the correct scrolls for each tree—ensuring that as visitors walk through the forest, they seamlessly hear the language that speaks to their heart.

And just like that, the forest becomes a harmonious place where everyone feels at home, understanding the language of the trees no matter where they come from. This is how I bring the magic of internationalization to life in Angular, making the enchanted forest a welcoming place for all.

---

Preparing the Language Scrolls

First, we need to extract messages from the central tree—the source language. In Angular, we use Angular CLI to extract these messages into an XLIFF file. Here’s how we cast that spell:

ng extract-i18n --output-path src/locale

This command generates a file named messages.xlf in the src/locale directory. This file is our initial scroll, containing all the text that needs translation.

Crafting Translations

Next, the translators take this messages.xlf file and create translated versions for each language tree. For example, we might have messages.fr.xlf for French and messages.es.xlf for Spanish, each containing the translations for the respective languages.

Configuring the Application

To ensure the right scroll is read by each visitor, we configure our Angular application. This involves setting up the app to load different translation files based on the language choice. We define these configurations in the angular.json file:

"projects": {
  "your-app-name": {
    ...
    "i18n": {
      "sourceLocale": "en-US",
      "locales": {
        "fr": "src/locale/messages.fr.xlf",
        "es": "src/locale/messages.es.xlf"
      }
    }
    ...
  }
}

Building the Application

Finally, we cast the final spell to build our application for each language:

ng build --localize

This command generates separate builds for each language, ensuring that each visitor hears the right whispers when they visit the forest.

Key Takeaways

1. Extract and Translate: Use ng extract-i18n to extract messages, then create translated files for each language.
2. Configure Locales: Define your locales in angular.json to tell Angular where to find each language’s scroll.
3. Build for Localization: Use ng build --localize to create builds for each language, ensuring seamless language switching.