Do you add multilingual support (Angular)?
16/06/2020 3:07 AM by
How to implement multilingual support in an Angular project?
There are several ways of implementing multilingual support in an Angular project, the following libraries are popular: Internationalization (i18n):
the standard Angular built-in module to help the application dealing with multilingual. It creates multiple language versions of your application. ngx-translate:
a library enhanced the Angular built-in feature, it supports not only template translations but can also be used in the code by APIs. angular-gettext:
the simplest powerful 3rd party library providing translation support to Angular.
The following table shows the pros and cons of the 3 libraries:
- Better support of displaying dates, numbers, percentages, and currencies in a local format.
- Better support for handling plural forms of words, and alternative text.
- It only works with one language at a time, you have to completely reload the application to change the language
- Only support translation in the template (by using HTML tag)
- You need to build + deploy every time you make a change to the language, and you have to have a separate folder every time.
- You can see the language in the URL.
- It provides more powerful API support
- It supports JSON files by default to store the translation resources
- It doesn’t provide good support for plural forms and dates.
- Ngx-translate will stop its releases when angular built-in modules catch up with the ngx-translate features.
- The developer said that when Angular i18n catches up the library will be deprecated. Check article.
- The simplest library to deal with multilingual.
- Supports plural handling in different languages.
- It compiles the translations during the compiling period, which doesn’t support the change of translation at any time.
- Only supports AngularJS
Ngx-translate provides the APIs which you can use to translate the resources in the code:
By comparing the 3 libraries we can see
ngx-translate provides the best functionality now due to the API support, even though the built-in i18n module will catch up at a certain time, but we still recommend using
ngx-translate for multilingual support in your Angular application.
Since Angular 9, they now have built-in support for i18n which is called Angular Localized, it is expected that over time, Angular Localize will become the most popular (see the yellow line on
Google Trends increase).
- Figure: It is expected that the yellow line will become the dominant internationalization tool for Angular
Do you feel this rule needs an update?