What Is the Best Angular Library for Internationalization?

When things come down to the process of translating Angular applications, you have a handful of available libraries. And the question is: What should you choose? In this article, we'll take a look at some popular Angular I18n solutions, discuss their features and try to pick the perfect candidate!

JavaScript has come a long way from a “toy language” to one of the most popular and in-demand technologies. There are countless libraries and tools to perform testing, minify assets, deploy projects, and, of course, to provide support for internationalization. As always, we will be talking about the latter. However, today’s question is not “How do I translate my Angular application?” but rather “What is the best Angular library for internationalization?”. This question is very important indeed! You need to make a conscious decision about the library you are going to stick with. Developing an application can be tedious but re-writing its parts may be even more complex. Therefore, choosing the right tools from the start is very helpful. In this article, we’ll go through several libraries that can be used to introduce internationalization support for Angular applications and discuss in detail their pros and cons. Please note that I won’t cover AngularJS which is considered more or less obsolete.

We’ll cover the following three candidates:

  • Ngx-translate
  • The built-in i18n module
  • I18next

For each solution, I am going to list its main features, pros and cons, and also give my own thoughts on the topic. Shall we proceed?

Ngx-translate

If you ask a seasoned developer savvy in Angular “What library do I use to translate my application?”, he 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:

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 ability to write custom loaders. Now it turned intto 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:

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 less 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 to easily extract your translations, use AoT compiler, and serve localized apps with a very little effort…

However, this module does have some downsides. First of all, there is no easy to 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.

I18next

The last solution I’m going to present 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 fuction 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 file or provide them directly as JSON object)
  • Plugins for frameworks and other languages (Angular, React, Vue, Rails, PHP and other)
  • An array of third-party plugins adding features like new supported backends, custom loaders, converters, extractors etc

You can read more on how I18next compares to other solutions here. If you would like to see I18next in action, we have a tutorial demonstrating plain JS app.

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 plugin (maintained by another person) to make everything working? 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.

PhraseApp 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 PhraseApp that can make your life easier: Grab your 14-days trial!

PhraseApp supports many different languages and frameworks, including JavaScript, of course. It allows to easily import and export translations data. What is cool, you can quickly understand which translation keys are missing because it is easy to lose track when working with many languages in big applications. On top of that, you can collaborate with translators as it is much better to have a professionally done localization for your website.

Conclusion

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!

What Is the Best Angular Library for Internationalization?
4.6 (91.58%) 76 votes
Author
Ilya PhraseApp Content Team
Comments