Running Translated Angular Applications via CLI

Angular’s internationalization (i18n) features allow developers to create multilingual applications efficiently. Once translations are prepared, you need to build and run the application for specific languages or locales. Angular CLI makes this process straightforward, enabling developers to build and serve localized versions of their applications.

This article provides a detailed guide on running translated Angular applications using the CLI, including setup, commands, and best practices.

Pre-requisites

Before running translated Angular applications, ensure the following:

1. Translation Files: Extracted and translated messages in formats like .xlf, .xlf2, or .xtb.
2. Angular Localize Package: Installed in your project.
3. Configured i18n: Properly configured locales in the angular.json file.

Install Angular Localize if not already added:

bashCopy codeng add @angular/localize

1. Configuring Locales in angular.json

To serve or build localized applications, you need to define the locales in your project configuration.

Example angular.json Configuration

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

• sourceLocale: The default language of your application.
• locales: A key-value pair where the key is the locale identifier (e.g., fr, es) and the value is the path to the corresponding translation file.

2. Building Translated Applications

To build an Angular application for specific locales, use the --localize option in the CLI.

Command for Building All Locales

bashCopy codeng build --localize

This command generates a separate build for each locale defined in angular.json.

Command for Building a Specific Locale

bashCopy codeng build --localize --configuration=fr

Key Points:

• Replace fr with the locale identifier for the desired language.
• Each localized build is stored in the dist/ folder, with separate subfolders for each locale.

3. Serving Translated Applications

Serve the Default Locale

Run the application in the default language as usual:

bashCopy codeng serve

Serve a Specific Locale

To serve a localized version of your application, use the --configuration option:

bashCopy codeng serve --configuration=fr

Key Points:

• The --configuration flag specifies which locale to serve.
• Ensure translations for the locale exist in the angular.json file.

4. Using Multiple Hosts for Localized Builds

For testing all locales simultaneously, you can configure multiple hosts for different locales.

Example Commands:

bashCopy codeng serve --configuration=fr --port=4201
ng serve --configuration=es --port=4202

This approach lets you access different locales by visiting different ports, e.g.,:

• http://localhost:4201 for French
• http://localhost:4202 for Spanish

5. Handling Runtime Localization

Angular also supports runtime localization, where translations are dynamically loaded without requiring separate builds. This requires additional configuration, such as using services or libraries like @ngx-translate.

Best Practices for Running Translated Applications

1. Automate Builds: Use scripts or CI/CD pipelines to build all locales automatically.
2. Test Each Locale: Test each localized build thoroughly to ensure translations fit the design and functionality.
3. Fallback Mechanisms: Provide fallback translations for untranslated keys to prevent missing content.
4. Optimize Translation Files: Keep translation files clean and up-to-date to avoid unnecessary rebuilds.

Troubleshooting Common Issues

1. Missing Translations
   • Problem: Some translations do not appear.
   • Solution: Verify that all keys exist in the translation file and match the source messages.
2. Configuration Errors
   • Problem: CLI throws errors when specifying --localize.
   • Solution: Check the angular.json file for typos or missing paths.
3. Port Conflicts
   • Problem: Multiple ng serve commands fail due to port conflicts.
   • Solution: Use the --port flag to assign unique ports for each locale.

Conclusion

Angular CLI simplifies the process of running translated applications with its robust i18n support. By properly configuring angular.json, using the --localize option, and serving specific locales, you can streamline the workflow for creating multilingual applications. Whether testing on local servers or deploying in production, Angular provides all the tools you need to deliver seamless experiences to users worldwide.