Add internationalization (i18n) to an Angular app

A guide to adding internationalization and localization in 3 different ways to an Angular application

Photo by Demi DeHerrera on Unsplash

In this article, I will provide 3 ways to add internationalization to your Angular 8 app.

Use ng xi18n Install ngx-translate Create your own solution (no library)

For more content like this, check out https://betterfullstack.com

Before getting started, we need to understand what Internationalization and Localization are first.

Internationalization is the process of designing and preparing your app to be usable in different languages.

Localization is the process of translating your internationalized app into specific languages for particular locales.

Use xi18n

For localization, you can use the Angular CLI to generate most of the boilerplate necessary to create files for translators and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps:

Extracting localizable text into a file that you can send out to be translated.

Building and serving the app for a given locale, using the translated text.

Creating multiple language versions of your app.

To do this, add an i18n pipe to your element. Simply run the following the command:

generate locale file

By default, Angular uses the locale en-US , which is English as spoken in the United States of America.

Then we can add another language by running the following command:

add vi language

Then we go to messages.vi.xlf to change the text there. Add a configuration to angular.json for the second language.

Now run ng serve configuration=vi . You can check the sample here.

You have to build every time for each language and specify a different base-href for your language. This makes me uncomfortable sometimes. In addition, the .xlf file is hard to read also.

Let’s look at another option to add i18n.

Use ngx-translate

ngx-translate is an internationalization (i18n) library for Angular. This library is quite easy to install and use.

I have been using this library for a long time. Anytime I start a new project that is going to be large, I use this library because it has a ton of benefits.

They provide ways to get the translation on the template and components file. They support multiple JSON property levels. They provide many methods to use. They allow you to customize your own loader. We can add a value in the case of a missing translation. They support AOT compilation in production mode.

Installation:

The @ngx-translate/core contains the core routines for the translation — the TranslateService and some pipes.

The @ngx-translate/http-loader loads the translation files from your server.

Update code:

app.module.ts

The HttpLoaderFactory is required for AOT (ahead of time) compilation in your project.

Set the default language to en at app.component.ts

Issues:

No provider for HttpClient

I imported HttpClientModule to solve this issue.

I created en.json by following the URL. You can read more about this great library here.

Create your own solution (no library)

I always use this method for simple Angular projects and any kind of project that needs basic translations only. In addition, building something from scratch also is a good idea to learn more about the problem we are solving.

The idea is we add a locale JSON file manually and load that file by HTTP. Then, in the template we pass a translation key to a pipe, and that pipe will pass the key to an object to get the value of that property.

Here is the step:

Create a locale folder inside assets folder. Create TranslateService and use HttpClient to load the locale file. Adding one public variable translateObject to call it at the pipe file. Create a TranslatePipe which receives a keyword from the template and maps it to translateObject from TranslateService .

You can check source code here.

This is simple and I usually use this for a landing page or simple projects. But this cannot have nested properties like ngx-trsnlate and cannot bind dynamic values for translation.

For those who want to try a new library, you can check out transcolo. That was built by Netanel Basal.

Summary

Internationalization and localization are an important part of an application. We can use the angular-cli to support it or install a library to save you time.

For basic web applications, we can create our own translation system. This is also a great way to learn how it works.

I hope you found this article useful! You can follow me on Medium. I am also on Twitter. Feel free to leave any questions in the comments below. I’ll be glad to help out!

Resources / References

[1]: i18n https://angular.io/guide/i18n

[2]: ngx-translate library https://github.com/ngx-translate/core