A Guide to Internationalization (i18n) in Angular (2024)

In the vast digital landscape, reaching a global audience is the ultimate goal for web developers. One way to achieve this is by making your Angular application multilingual. Welcome to the world of Internationalization (i18n), where your app can speak the language of users from around the globe. In this blog, we’ll explore how to integrate i18n into your Angular project and make your app accessible to users worldwide.

Think of your web app as a tool that can connect with users from different parts of the world. To ensure a welcoming and user-friendly experience for everyone, we need to speak their language. Internationalization (i18n) is the process of making your app adaptable to multiple languages and regions. Angular provides powerful tools and features to help you achieve this.

“Hello, World!” — Your App in Many Languages 🌍

Before we begin our i18n journey, let’s create a new Angular project. Don’t worry; this part is straightforward.

ng new i18n-app

This command initializes a new Angular project using the Angular CLI. It will ask you some questions about your project configuration, such as whether to include Angular routing or which stylesheet format to use (CSS, SCSS, etc.). Choose the options that suit your project’s needs.

To embark on our i18n journey, we need the right tools. We’ll install and configure Angular’s i18n tools to make our app multilingual.

ng add @angular/localize

This command installs the necessary packages and updates your project configuration to enable i18n support. Angular’s @angular/localize package equips you with the tools for extracting and managing translations.

Now, let’s make your app multilingual. To internationalize your app, you need to mark text for translation using the i18nattribute. It's like adding tags to identify phrases that need translation.

Here’s an example of how you can mark text for translation in an Angular template:

<h1 i18n="@@appTitle">My Awesome App</h1>

The @@appTitle value serves as a unique identifier for this translation message. It helps associate translations in different languages with this specific piece of text.

A good practice is to associate each text with unique i18n identifiers.

Manually extracting translation messages every time you update your app can be cumbersome. Fortunately, you can automate this process using the xliffmerge package.

• Install xliffmerge:

npm install xliffmerge --save-dev

• Configure xliffmerge: Create a configuration file, e.g., xliffmerge.config.json, and specify the languages you want to support and the source and target folders for your translations. Here's a simple configuration:

{
 "xliffmergeOptions": {
 "srcDir": "src",
 "genDir": "src/locale",
 "languages": ["en", "fr", "es"]
 }
}

• Generate Translations: Run xliffmerge to generate or update your messages.xlf files:

npx xliffmerge --profile xliffmerge.config.json

• npx xliffmerge --profile xliffmerge.config.json

This command will automatically extract and merge translation messages from your app’s templates into the respective language files.

In our app’s global journey, we need a starting point — a default language. You can set it in your app.module.ts file.

import { LOCALE_ID } from '@angular/core';
@NgModule({
 providers: [{ provide: LOCALE_ID, useValue: 'en-US' }],
})
export class AppModule {}

In this example, we’ve set the default language to English (United States). This means that when a user first visits your app, it will be displayed in English unless they choose a different language.

Implementing a language switcher component lets users choose their preferred language, making your app adaptable to their needs.

Here’s a simple example of how to create a language switcher in your Angular app:

<button (click)="changeLanguage('fr')">Français</button>
<button (click)="changeLanguage('es')">Español</button>

In the component:

changeLanguage(language: string) {
 this.translateService.use(language);
}

This code allows users to switch the language of your app dynamically.

Numbers and dates have different formats in different regions. Angular simplifies this by providing built-in pipes for formatting them based on the user’s locale. It’s like giving your app a cultural makeover.

Angular’s pipes allow you to format numbers, dates, and currencies according to the user’s locale. For example, you can format a date using the date pipe:

{{ today | date: 'shortDate' }}

In this example, today is a JavaScript Date object, and the date pipe formats it as a short date according to the user's locale.

Now that your app is multilingual, it’s time to put on your explorer hat and test it in different languages. Check for text overflows and UI issues that might arise with longer translations.

It’s important to thoroughly test your app in various languages to ensure a smooth user experience for all your international users.

“Testing: The only place where ‘I think it works’ isn’t good enough.” 🧪

Once your app is fluent in multiple languages, it’s ready to conquer the web. Deploy it and watch it charm users worldwide.

Deploying an internationalized Angular app is no different from deploying a regular Angular app. You can use various hosting services or platforms like Netlify, Vercel, or AWS to host your app and make it accessible to users globally.

“To infinity and beyond…languages!” 🚀

Congratulations, you’ve unlocked the secret to making your Angular app multilingual! With Internationalization (i18n), you can take your app on a global journey, speaking the language of every user. Embrace diversity, bridge cultures, and create a truly global web presence.

• Angular i18n Documentation
• xliffmerge GitHub Repository

Now that you’ve mastered the art of i18n and automation, your app is ready to connect with users from all over the world.