Multilingual applications in Angular

In this article we will look at how you can quickly transfer your Angular project to a multilingual mode of operation and what utilities there are for this.

Stop using ngx-translate!

Most of the projects that I happened to meet were written using this library, and not surprisingly, it is very simple, and it appeared even before the official release of Angular.

Use the standard i18n!

Add it to your project is even easier than it seems.

And so, here is a small instruction:

• Add i18n attribute to template element
• Use the i18n- attribute to translate the attributes of the element itself
• Use ICU expressions
• Register the desired locale for Pipe

Let's translate the hello-world app in 5 minutes:

In this example, we denote the title attribute and the content itself for translation.

<div i18n i18n-title title="">  {{name}}! </div> 

We can also set a description for our translator.

 <div i18n="   ">  {{name}}! </div> 

And of course, for duplicate texts, we can specify identifiers:

 <span i18n="@@HiId">!</span> 

We can also combine identifiers with a description:

 <span i18n="  |@@HiId">!</span> 

Put the ICU expression where we need it:

 <span i18n>  { orders, plural, =0 {} =1 { } other {<b>{{orders}}</b>} } <span> 

In this example, it works like a normal switch-case. But there are various uses.

Almost everything is ready!

Run the Angular CLI command:

ng xi18n

By default, collects the file messages.xlf in XLIFF format. This is enough to work on.

Copy this file into messages.fr.xlf (let's say we want a translation into French).

We give the file for translation, fortunately this format is very common, and there are a lot of utilities for it so that the translator can be conveniently edited.

Well, now edit angular.json configs:

 "configurations": { ... "fr": { "outputPath": "dist/my-project-fr/", //    "i18nFile": "src/locale/messages.fr.xlf", //    "i18nFormat": "xlf", //   "i18nLocale": "fr", //   ... } } 

That's all!

> ng serve - configuration=fr
> ng build - configuration=fr

Now consider how it works from the inside:

From the diagram it is clear that the dynamics are simply not possible, this is the way the standard i18n is at the moment. And any change of language will require downloading a new bundle.

In fact, for most cases related to multi-lingual dynamics is not needed. Most often this is a completely different localization. Just ask yourself, how often do your users switch languages? And what if you need to translate your application into Arabic? Detailed recommendations can be read on the W3C website.

It is impossible not to insert a link to the comparison table of various options for i18n for Angular .

For lovers of dynamics, there is good news, along with Ivy will appear Runtime Service.

i18n and ivy

So what will it give?

• It can be used everywhere (React, Vue), for example through Angular Elements
• Tree-shakeable
• Lazy-loading support
• Support for various locales
• Full functionality without compilation

Well, since there are not so many utilities, especially those that simplify life, I created a small utility for quick translation into multilingual mode of your ready application:

 > npx ngx-translate-all --format ngx-translate | i18n --in ru --out en,fr --outPath src/assets/i18n 

It supports 2 formats, both standard i18n and ngx-translate-all.
For the standard i18n utility will place the necessary attributes, and add the desired description.

 --format i18n <div i18n="AppModule.AppComponent"> ! </div> 

For ngx-translate assign variables, put the pipe, and export them to the desired json file.

 --format ngx-translate <div> {{AppModule.AppComponent[0] | translate}} <div> 

And I also want you to transfer your projects to standard i18n, at least in templates. And soon I will publish a special utility that automatically transfers your project from ngx-translate to i18n

 > npx ngx-translate-migrate ngx-translate -> i18n 

To follow, you can subscribe to the project on my twitter, github or channel in a telegram dedicated to Angular:

https://twitter.com/irustm
https://t.me/ngFanatic
https://github.com/irustm

If you have any questions, then I invite you to live video podcast ngRuAir:

April 7, 2019 20.00 Moscow time Topic: Development of multilingual applications on Angular.