Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 - i18n vs. ngx-translate

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.

like image 431
Joey Gough Avatar asked Jun 28 '18 15:06

Joey Gough


People also ask

What is NGX-translate in Angular?

What is ngx-translate? ngx-translate is the library for internationalization (i18n) and localization in Angular. It simplifies your Angular application to work for localization. It's easy to set up and use in an Angular application.

What is NGX-translate http loader?

What is @ngx-translate/http-loader? A loader for ngx-translate that loads translations using http.

What is i18n in Angular?

Angular Internationalizationlink Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. Localization is the process of building versions of your project for different locales.


1 Answers

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.

like image 152
JB Nizet Avatar answered Oct 12 '22 15:10

JB Nizet