Angular 6 - i18n vs. ngx-translate

Joey Gough picture Joey Gough · Jun 28, 2018 · Viewed 13.6k times · Source

I am working on a large project using angular 6. This project needs significant i18n integration. I am trying to make the right decision as to how to proceed.

The way I see it is that I can choose between:

  1. ngx-translate (https://github.com/ngx-translate/core)
  2. Angular i18n (https://angular.io/guide/i18n)

I am leaning toward choosing option 2; Angular's i18n. This is because it is Angular's own built in package and that just sits better with me. Apparently it is also better for SEO and marginally better for performance without any work around. Also, now it is released I think ngx-translate might be deprecated. Lot's of info here: Angular 5 internationalization.

However here are my reservations:

  • Apparently Angular's version is quite new / still catching up (https://github.com/ngx-translate/core/issues/495). Is it too new to take on?
  • Apparently I have to have a separate website build for each language (https://angular.io/guide/i18n#template-translations)??? I really don't think that would be a good thing. Is that right? or is it a case that template files are dynamically inserted each time? I know that with ngx-translate the translated words are just stored in .json files - I like the neatness of that. I don't think we want a bunch of different website builds.

Is there a way to do live language switching with angular i18n? i.e. switching language on the page without reloading / refetching data from the server? Is that what they call JIT?

Has Anyone tried https://github.com/robisim74/angular-l10n? looks very good also.

Many thanks. Best regards.

Answer

JB Nizet picture JB Nizet · Jun 28, 2018

Is it too new to take on?

This is opinion-based, and thus off-topic

Apparently I have to have a separate website

You need a separate application (i.e. index.html + bundles). But you could serve all those applications from a single URL, deciding which one to serve on the server. That will (hopefully) change with Angular 7, when the new dynamic i18n, built on top of Ivy, is available.

is it a case that template files are dynamically inserted each time?

Not sure what you mean. The translations of the locale you build for are stored in the generated template classes at compile time, by the Angular AOT compiler.

Is there a way to do live language switching with angular i18n?

No, and that won't be possible with the next version of i18n either. The same, unique application will be able to run in several languages, but the language will still have to be chosen at startup, and you'll have to restart the app to choose another language.

Is there a way to do live language switching with angular i18n?

No. Not efficiently at least.

Is that what they call JIT?

No. The JIT compiler is what compiles your HTML templates into JavaScript at startup, in the browser. In production, you use the AOT compiler (which is also used to integrate the translations into the generated JS classes), which does a similar compilation of the templates, but at build time rather than runtime.