Applications with multilingual support can be potentially benefits to end users which coming from different nationality, by providing different languages to improve the user experience and user acceptance with comfortable language. For all popular international product or web applications, this becomes one of the mandatory feature user would like to have (e.g. Amazon, WeChat etc…).
SSW is trying to extend the market in China, and the Chinafy concept is willing to bring more western companies to extend to China, the language support for both Chinese and English is one of the very important topic in every scenario. We require the multilingual support for our product.
How to realize multilingual support in Angular project?
There are several way of implementing multilingual support in Angular project, currently the following angular libraries or built-in component supports this:
• ngx-translate : NGX-Translate is an internationalization library for Angular. It lets you define translations for your content in different languages and switch between them easily. This is one of the most sophisticated library not only support template translations but also can be used in the code by APIs.
• Internationalization (i18n) : i18n is the standard Angular built-in functionality to setup the application locale and all related aspects of internationalization. With the native support, i18n can realize the multilingual support recompiling of the application and translation resources.
Why we recommend ngx-translate?
Considering of realizing multilingual support, any of the above libraries can be used. However in SSW we recommend to choose ngx-translate. The reasons why we choose ngx-translate:
• Easy to start with and powerful features support
• Switching language at runtime
• Lazy load of translation resources
• NGX-Translate is also extremely modular, it can be customized easily
• Different loaders defined for translation files with default of JSON files
• API support to use it in code
• Completed set of tools/commands for extracting and translating
By comparing with the 3 libraries, we recommend to use ngx-translate in your project rather than the other libraries due to the following reasons:
• Angular I18n only works with one language at a time, you have to completely reload the application to change the language. The JIT support only means that it works with JIT, but you still have to provide the translations at bootstrap because it will replace the text in your templates during the compilation whereas ngx-translate uses bindings, which means that you can change the translations at any time. Angular-gettext compiles the translations during the compiling period, which doesn’t support change of translation any time either.
• Angular i18n only supports using i18n in your templates(by using HTML tags) for now, ngx-translate and Angular-gettext works both in code and templates. Ngx-translate provide more powerful API support.
• Angular-gettext seems only support AngularJS, while i18n and ngx-translate support Angular 2+.
Angular i18n are more powerful in ICU expressions (e.g. plurals and select) and placeholders etc, but we still recommend to use ngx-translate, and ngx-translate provides the latest versions for angular 6 and they have a better roadmap coming along with Angular.