How to realize multilingual support in an Angular project?
There are several ways of implementing multilingual support in an Angular project, the following libraries are popularly used: 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 also can be used in the code by APIs. angular-gettext:
the simplest powerful 3rd party library provides the translation support to Angular.
The following table shows the pros and cons of the 3 libraries:
+ Better support of displaying dates, number, percentages, and currencies in a local format.
+ Better support of 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)
- It provides more powerful API support
- It supports to 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 the ngx-translate features.
- 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 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.