Multilingual apps in Angular

In this article, we will consider how you can quickly transfer your Angular project to multilingual operation and what utilities are there 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 appeared before the official release of Angular.

Use the standard i18n!

Adding it to your project is even easier than it sounds.

And so, here is a short instruction:

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

We translate the hello-world app in 5 minutes:

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

    Привет {{name}}!

We can also set a description for our translator

   Привет {{name}}!

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

Привет!

We can also combine identifiers with a description:

Привет!

We expose the ICU expression where we needed it:

   Заказов {
    orders,
    plural,
    =0 {нет}
    =1 {почти нет}
    other {{{orders}}}
}

In this example, it works like a regular switch-case. But there are various use cases.

Almost everything is ready! 

Run the Angular CLI command:

ng xi18n

By default, it will collect a file messages.xlfin XLIFF format. This is enough to work further.

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 to make it easy for the translator to edit.

Well, now we edit the 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 out:

It can be seen from the diagram that the dynamics are simply not possible, that's how the standard i18n is arranged at the moment. And any change of language will require downloading a new bundle.

In fact, for most cases related to multilingualism, a speaker is not needed. Most often this is a completely different localization. Just ask yourself, do your users often switch languages? But what if you need to translate your application into Arabic? You can read detailed recommendations on the W3C website.

One cannot but insert a link to a table comparing various i18n options 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 never too many utilities, especially making life easier, I created a small utility for quickly switching to multilingual mode your finished 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 standard i18n, the utility will arrange the necessary attributes and add the desired description.

--format i18n

   Привет!

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

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

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

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

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

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

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

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