The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Internationalization

Next ►
►

Internationalization (i18n) is the process of designing and preparing your application to be adaptable to various languages and regions without requiring engineering changes to the source code. Angular provides robust support for internationalization, making it easier to create applications that can be translated into multiple languages.

Key Concepts

  1. Localization (l10n): The process of translating your internationalized application into specific languages and adapting it to specific regions.
  2. Translation Files: Files that contain the translated text for different languages.
  3. Angular i18n Tools: Angular provides built-in tools and libraries to facilitate internationalization and localization.

Steps to Implement Internationalization in Angular

  1. Preparing the Application

First, ensure your application is ready for internationalization by marking the text that needs to be translated.

Example: Marking Text for Translation

<!-- app.component.html -->
<h1 i18n="@@welcomeMessage">Welcome to our application!</h1>

In this example, the i18n attribute is used to mark the text "Welcome to our application!" for translation. The @@welcomeMessage is an optional custom ID for the translation unit.

  1. Extracting Translation Messages

Use Angular CLI to extract the marked text into a translation file.

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

This command generates a messages.xlf file in the specified output path. This file contains all the marked text in your application.

  1. Translating Messages

Translate the extracted messages into the desired languages. For example, create a messages.fr.xlf file for French translations.

Example: French Translation File

<!-- src/locale/messages.fr.xlf -->
<xliff version="1.2">
  <file source-language="en" target-language="fr" datatype="plaintext">
    <body>
      <trans-unit id="welcomeMessage" datatype="html">
        <source>Welcome to our application!</source>
        <target>Bienvenue dans notre application!</target>
      </trans-unit>
    </body>
  </file>
</xliff>

  1. Configuring the Angular Application

Configure Angular to use the translation files. This involves modifying the angular.json file and setting up the build configurations.

Example: angular.json Configuration

{
  "projects": {
    "your-app-name": {
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "fr": "src/locale/messages.fr.xlf"
        }
      },
      "architect": {
        "build": {
          "configurations": {
            "fr": {
              "localize": ["fr"]
            }
          }
        },
        "serve": {
          "configurations": {
            "fr": {
              "browserTarget": "your-app-name:build:fr"
            }
          }
        }
      }
    }
  }
}

  1. Building and Serving the Application

Build and serve the application for the specific locale.

ng build --localize
ng serve --configuration=fr

This will build and serve the application with the French translations.

Practical Exercise

Exercise: Add Spanish (es) Localization

  1. Mark Text for Translation: Add the i18n attribute to some text in your application.
  2. Extract Messages: Use the Angular CLI to extract the messages.
  3. Translate Messages: Create a messages.es.xlf file and add Spanish translations.
  4. Configure Angular: Update the angular.json file to include the Spanish locale.
  5. Build and Serve: Build and serve the application with the Spanish locale.

Solution

  1. Mark Text for Translation:
<!-- app.component.html -->
<p i18n="@@greetingMessage">Hello, how are you?</p>
  1. Extract Messages:
ng extract-i18n --output-path src/locale
  1. Translate Messages:
<!-- src/locale/messages.es.xlf -->
<xliff version="1.2">
  <file source-language="en" target-language="es" datatype="plaintext">
    <body>
      <trans-unit id="greetingMessage" datatype="html">
        <source>Hello, how are you?</source>
        <target>Hola, ¿cómo estás?</target>
      </trans-unit>
    </body>
  </file>
</xliff>
  1. Configure Angular:
{
  "projects": {
    "your-app-name": {
      "i18n": {
        "sourceLocale": "en",
        "locales": {
          "es": "src/locale/messages.es.xlf"
        }
      },
      "architect": {
        "build": {
          "configurations": {
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          "configurations": {
            "es": {
              "browserTarget": "your-app-name:build:es"
            }
          }
        }
      }
    }
  }
}
  1. Build and Serve:
ng build --localize
ng serve --configuration=es

Conclusion

Internationalization is a crucial aspect of modern web applications, allowing them to reach a global audience. By following the steps outlined in this section, you can prepare your Angular application for multiple languages and regions, ensuring a broader reach and better user experience. In the next module, we will explore performance optimization techniques to make your Angular applications faster and more efficient.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved