As always, we will be talking about the latter. Nevertheless, today’s question is not about how to translate an Angular application. Instead, we will explore the best Angular libraries for internationalization. Why is that important at all?
Well, at some point, you need to make a decision on the library you are going to stick with. Developing an application can be tedious, but rewriting any parts at a later stage might be even more complicated. Therefore, choosing the right tools from the start can be very helpful.
This guide will walk you through several libraries you can use to implement internationalization support for Angular applications and also discuss their pros and cons. That being said, this does not include AngularJS, which is considered more or less obsolete.
Here are our three candidates for the best Angular i18n library:
- The built-in i18n module
If you ask a seasoned developer savvy in Angular “What library do I use to translate my application?”, they would most probably answer “Use ngx-translate!”. That would be no surprise! This third-party solution has been around for nearly four years now and gained lots of followers. Note that ngx-translate supports Ionic applications as well (we have an article on the topic). This is a good thing as the built-in i18n module is not compatible with Ionic 4 and it’s hard to predict when this situation will change.
Ngx-translate has lots of features, including:
- Fast and simple integration process (check out this article for a simple example)
- A built-in loader to fetch translation files from the given path
- Translation files are stored in JSON format, which is lightweight and easy to work with
- Support for interpolation and HTML markup inside translation messages
- Translations can be performed using a service, a simple pipe, or a directive
- Support for event listeners (for example, an
- Ability to define a missing translation handler
- A handful of plugins including a special router,
.pofiles loader, translations extractor, and some others
The Bottom Line
As you can see, ngx-translate is a mature and viable solution. Initially, it was created to overcome problems with the Angular built-in i18n module, such as support for the JSON format and the ability to write custom loaders. Meanwhile, it has turned into a full-scale extensible solution, and many developers are fond of it.
However, the built-in module is steadily evolving and now it can be seen as a production-ready solution. Judging by the following discussion, ngx-translate was initially viewed as a temporary solution. It means that sooner or later, the built-in module will supersede it. Interestingly enough, the creator of ngx-translate joined the Angular team, so he works on the built-in i18n support now.
Therefore, while ngx-translate is still a good candidate to pick, you should bear in mind the information above. If you are planning to develop a long-term application, sticking to this third-party solution may not be the best option. Why? Well, it simply may not be maintained anymore. One exception would be Ionic 4 apps, which are not compatible with the built-in module at all. In this case, your options are quite limited.
The Built-in I18n Module
Angular is quite a big framework and, of course, it does have built-in support for internationalization. Initially, this module had some problems and limitations, but now it has all the necessary features, including:
- Integration with Unicode CLDR
- A special tool to extract strings into translation files (where the actual translation takes place); note that this module works only with XML
- A special option to build an application for the given language. This enables support for the Ahead of Time compilation
- An ability to provide context for translations. This is very important for translators to adequately translate a given phrase into another language
- An ability to mark HTML attributes for translation
- An ability to mix pluralization and alternate text messages (check this example)
If you would like to see the built-in module in action, we have a tutorial on it.
The Bottom Line
The built-in module is convenient and feature-rich. It is more complex and has fewer bugs than ngx-translate (citing the words of the library’s creator). It would seem an obvious choice to many developers because it’s the solution you already have — there’s no need to add some third-party libraries. This module allows you to easily extract your translations, use an AoT compiler, and serve localized apps with very little effort…
However, this module does have some downsides. First of all, there is no easy way to write a custom translation loader (and this was one of the reasons ngx-translate was initially created). Next, there is XML (!). Not sure about you, but I find this format quite ugly and too heavy in contrast to JSON or, say, YAML. Of course, this is not really a problem but rather a matter of taste. Still, it might be important for some people. Lastly, this built-in module still does not support Ionic 4 (which is the latest version at the time of writing this article), and so you have to find an alternative solution.
But, honestly, even taking these disadvantages into consideration, I would still recommend starting a new project with the built-in i18n module. I am pretty sure it will become a de-facto standard very soon. And, believe me, this tool is not complex at all: You’ll get the grip in no time.
The last solution I’m going to present to you is called I18next. This is a general localization framework that supports both pure JS and framework-powered applications. This solution is quite large and heavy, but it has support for all features related to the translation process:
- A single function to rule them all: perform basic translation, pluralization, and complex formatting
- Support for multiple formats
- An ability to detect user language
- Various translation loaders (you may load data from a file or provide them directly as a JSON object)
- Integrations for frameworks and other languages (Angular, React, Vue, Rails, PHP, and others)
- An array of third-party plugins adding features like new supported backends, custom loaders, converters, extractors, etc.
To integrate I18next with your Angular application, use the following third-party plugin that supports AoT compilation, special events, error handling, and more. The official documentation also provides some useful examples, so you should be able to get rolling in no time.
The Bottom Line
I18next is a powerful and popular solution indeed, but I would still call it the least preferable of all three presented here. I18next is quite complex and heavy, and probably you would not want to add even more complexity to an Angular app. After all, it already has loads of dependencies, configurations, etc. My point is: There are basically no features that I18next supports and the built-in I18n Angular module doesn’t. So if there is a relatively little difference, why would you make your life more complex and include some third-party I18n framework? Especially, when it relies on a separate integration (maintained by another person) to make everything work? To me, it seems a bit strange.
Still, if you are a big fan of I18next and have used it a lot in your other projects, then this solution is still viable. For instance, it is one of my first candidates when translating pure JS apps. It does have many useful features, and, in contrast to ngx-translate, it is not planned to be superseded any time soon.
Phrase and Translation Files
Certainly, working with translation files is not easy, especially when the app is big and supports many languages. You might easily miss some translations for a specific language, which may lead to confusion among users. It is Phrase that can make your life easier: Grab your 14-day trial!
In this article, we talked about three potential solutions for translating your Angular applications: ngx-translate, the built-in module, and I18next. I gave you a brief introduction to their features, pros & cons in relation to Angular, in the hope that it will help you to make the right choice.
All in all, all of the Angular libraries described here are solid candidates. Therefore, don’t hesitate to experiment until you go for the option that suits you best – both in terms of available features and its general use.
Thank you for staying with me today, and until the next time!