Home
Do you add multilingual support (Angular)?
  v5.0 Posted at 24/05/2019 4:03 PM by Sebastien Boissiere

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 popularly:
 
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:

 

Pros (+)

Cons (-)


Internationalization

(i18n)

  • Better support of displaying dates, number, 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.

ngx-translate

  • 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 date.
  • 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 .
angular-gettext
  • 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:

code-1.png

code-2.png 

By comparing of 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 in a certain time, but we still recommend using ngx-translate for multilingual support in your Angular application.

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments: