The Best Angular Libraries for Internationalization

Software localization

JavaScript has come a long way from a “toy” 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, provide support for internationalization. As always, we will be talking about the latter. Nevertheless, today’s question is not about how to […]
Software localization blog category featured image | Phrase

JavaScript has come a long way from a "toy" 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, provide support for internationalization.

As always, we will be talking about the latter. Nevertheless, today's question is not about how to go about Angular localization. Instead, we will explore the best third-party Angular libraries for internationalization. Why is that important at all?

Well, at some point, you may need to decide on the library you are going to stick with in the long run. Developing an application can be tedious, but rewriting parts of it 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 external libraries for implementing internationalization support for your 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:

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

Shall we start?

Ngx-translate

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
  • A built-in loader to fetch translation files from the given path
  • Support for Ahead-of-Time compilation (which requires a custom loader though). AoT compilation simply means that all your TypeScript code and Angular-related HTML is turned to plain old JavaScript before the browser actually starts downloading the page. This approach, however, imposes a restriction: You need to serve separate apps for different locales
  • 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 onLangChange event)
  • Ability to define a missing translation handler
  • A handful of plugins including a special router, .po files 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:

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.

I18next

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.

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 a 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 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!

Phrase 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!