42

We decided to give it a spin and we started fresh project using Angular2. So far so good, but at this point we're facing an issue. At this point, what is the proper approach to i18n for Angular2? We've researched a little and found this:

However last commit is more than 5 months old... Doesn't look like active development.

Anyone tried using angular-translate or angular-gettext? Or maybe with Angular2 it's better to wrap something JS like i18next? Anyone could share their thoughts? Maybe you faced the same problem?

Adam Nowaczyk
  • 437
  • 1
  • 4
  • 3
  • I've found [ng2-translate](https://github.com/ocombe/ng2-translate). I'll give it a spin and share the experience here :D. – Adam Nowaczyk Jan 14 '16 at 19:14
  • I looked for info about i18n few weeks ago, but didn't yet try to implement it in real project. You can find an overview in [this video](https://www.youtube.com/watch?v=iBBkCA1M-mc)... Please share your experience with ng2-translate... – Sasxa Jan 14 '16 at 19:59
  • on the AngularConnect conference in November they mentioned the i18n story was delayed but now they had a person full time working on it. – Angular University Jan 14 '16 at 23:53
  • @AdamNowaczyk did you try and use ng2-translate? I am too looking for a solution... – TylerDurden Feb 03 '16 at 13:49
  • Not yet present in the latest beta of Angular2, but I prefer to wait for the official module. – gentiane Mar 06 '16 at 12:01
  • They are currently working on it. I saw a few pull requests recently. – Günter Zöchbauer Mar 09 '16 at 15:53
  • In my opinion, ng2-translate is not a suitable solution. We definitely have to wait for the Angular2 core solution of i18n. And here's why: A simple 1 component ng2 app. Disable cache and throttle through Regular 3G: 23 seconds to load, ~17 requests I've added ng2-translate (5 sentences in .json) to that and bum: 40 seconds to load, ~300 requests. That's unacceptable. Most of that is due to needing to have " 'rxjs': { 'defaultExtension': 'js' }" in the System.import as they instruct. I'd rather develop my own simple, custom pipe for translation, than using this 3rd party ng2-translate. – MrCroft Apr 29 '16 at 06:59
  • 1
    I don't see much of a performance hit with the latest version 2.4.3 on Angular2 RC6. We are setup with webpack which probably helps lots. The vendor.js created by webpack only increases by about 10KB with ng2-translate included. So the overall dowload only increased by 1 request (language file [13 sentences], we don't want to bundle those, additional language files should only download when the language changes). Our website is ~30 components, and takes ~13 seconds to load up with those settings. – Stephen Sep 09 '16 at 20:21
  • I've wrote a blogpost about this: https://lingohub.com/blog/2016/10/i18n-l10n-angularjs-apps-development-deployment/ comparing angular-translate with the Angular 2 approach – Betty St Oct 20 '16 at 09:20
  • regarding i18next, there's a nice tutorial blog post: https://locize.com/blog/angular-i18next/ – adrai Aug 23 '22 at 09:11

6 Answers6

19

Plunk was updated to Angular 2 Final: https://plnkr.co/edit/4euRQQ. Things seem to work the same as in RC7.

New i18n section has been added to Angular 2 official docs. Basically, it explains in details what happens in the plunkr above.

XLIFF is the only format for translations, no json support. A translation source file (xliff, xlf) should be created using ng-xi18n tool:

package.json:

"scripts": {
  "i18n": "ng-xi18n", 
  ...
}

and

npm run i18n

See the Merge translation section for details about merging a translation into a component template. It's done using SystemJS Text plug-in.

Another example using Gulp http://www.savethecode.com/angular2-i18n-native-support/

Older staff: Update based on RC7 and links provided by Herman Fransen:

I've made a minimal Plunkr example: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM

Comments to plunkr:

  • bootstrap should provide TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID with values -> setup translations
  • translatable items in html-templates should use directive i18n
  • translations are stored in .xlf file. Ties between languages is done through Id, ties with html by a value of <source> tag in xlf
  • currently xlf files are not used directly; a .ts file is manually created to wrap the content of xlf in an exportable variable. I guess, this should be working automagically in final release (maybe even now).

This is the first officially documented approach I found. However, it's still barely usable. I see the following issues in the current implementation:

  • Language is set at bootstrap, unable to change it in run-time. This should be changed in Final.
  • Id of a translatable item in xlf is generated SHA. Current way to get this id is a bit messy: you create a new translatable item, use it, copy SHA id from error and paste into your i18n.lang.xlf file.

There is a big documentation pull request concerning i18n

Older staff: Release notes https://github.com/angular/angular/blob/master/CHANGELOG.md have a record

i18n: merge translations 7a8ef1e

A big chunk of i18n was introduced in Angular 2 RC5

Unfortunately, still no documentation available.

Andrei Zhytkevich
  • 8,039
  • 2
  • 31
  • 45
  • Could you find anything about the roadmap for this? I don't like how much code you have to use with ng2-translate. – sandrooco Aug 29 '16 at 11:11
  • Indeed, `ng2-translate` is quite verbose. **i18n** roadmap is in https://github.com/angular/angular/issues/9104. – Andrei Zhytkevich Aug 29 '16 at 11:57
  • 1
    I just found this pull request for the documentation:https://github.com/angular/angular.io/pull/2309 – evandongen Sep 13 '16 at 06:43
  • Please, elaborate on `{{ 'TRANSLATION_ID' | translate }}` part. There's no sign that `translate` pipe exists in current implementation (this approach is implemented by ng2-translate), there is a sign that it isn't covered and [doesn't work like that for now](https://github.com/angular/angular/issues/9104#issuecomment-242803596). – Estus Flask Sep 16 '16 at 20:04
  • @estus, indeed, this approach doesn't work. It was mentioned in a proposal. I removed it from my answer – Andrei Zhytkevich Sep 16 '16 at 20:29
  • Is it possible to store in a `.json` instead `.xlf`? – Aral Roca Oct 01 '16 at 08:16
  • Hey, can we change language at runtime. It is ok it if reload the app. Kindly reply – Coder Guru Jan 04 '17 at 06:38
  • Using i18n Can we change language at runtime now or is there any way to set language on based on browser language? – Coder Guru Jan 05 '17 at 09:52
16

Everyone's eager for the official implementation, but this one worked for my use case: https://github.com/ocombe/ng2-translate

README is fairly thorough, and if you need something real particular (for me it was code-splitting) the code itself isn't too long or hard to read.

Samjones
  • 278
  • 2
  • 9
  • be carefull using that library, it is using an impure pipe, which fires at every single change of the component... not good performance – albanx Aug 17 '16 at 19:48
  • 5
    It's not because the pipe is "impure" that is has bad performance. The official async pipe is impure as well, and the TranslatePipe is based on it (the original code is almost the same). It has to be impure in order to resolve promises and observables when the lang changes or when it gets remote translations. When that is not necessary it returns immediately and the impact is minimal. – Olivier Aug 20 '16 at 16:32
8

Support for i18n is now official in Angular 2 RC6

Official release blog:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

A sample of internationalization with Angular 2 RC6
https://github.com/StephenFluin/i18n-sample

More info how the new concept of i18n works in angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

Herman Fransen
  • 2,200
  • 5
  • 24
  • 40
  • 3
    I'm a bit worried: looking at the sample code in i18n-sample, apparently the locale has to be provided at app bootstrap time which would mean, if I'm correct, that the language cannot be changed while the app is running... Please, prove me wrong! – candide Sep 09 '16 at 08:12
  • the API is labeled as experimental right now. So my guess is what they have right now is just proof of concept. I'm guessing that later on it should be responsive to the browsers locale and allow for switching during runtime. But the whole concept of being able to generate a XLIFF with notes to hand out to translators is fantastic. – cDecker32 Sep 09 '16 at 12:46
  • And it appears that they are using some algorithm to SHA the XLIFF Id to the value of the `text` ? I tried changing the XLF in the i18n-sample around and I get errors related to that. – jmbmage Sep 12 '16 at 19:01
  • Thanks for mentioning my old blogpost ;) There is now a new blogpost about this: https://lingohub.com/blog/2016/10/i18n-l10n-angularjs-apps-development-deployment/ comparing angular-translate with the Angular 2 approach – Betty St Oct 20 '16 at 09:21
  • Does somebody know how you would translate a attribute value itself? e.g. Link ? – Gambo Nov 12 '16 at 17:09
  • Can we change language at runtime now or is there any way to set language on based on browser language. – Coder Guru Jan 05 '17 at 09:52
  • Depending on how you prefer use choose to run you application - you can use JIT compilation to change language runtime. Otherwise if you compile AOT (Ahead-of-time) then you would have to architecture you application to use the correct language as early as possible. To answer the main question; I find that it is quite disappointing at this stage that only static text can be translated. – jabu.hlong Apr 07 '17 at 12:15
4

I found another way to implement this using pipe and service

HTML

<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>

TYPESCRIPT

...

// "this.translate" is our translate service
this.translate.use('es'); // use spanish

...

// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); 

...

https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1 https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-2

vinboxx
  • 605
  • 11
  • 13
3

There is an official support for i18n in Angular.io here:

https://angular.io/docs/ts/latest/cookbook/i18n.html

But! As mentioned in docs:

You need to build and deploy a separate version of the application for each supported language!

That makes this feature useless in most cases ...

Unless you will use it without CLI as described here:

https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

trojan
  • 1,465
  • 19
  • 27
  • I stumbled upon the same thing (having to build the app for each language) .. I am really lost, don't know what to say. This is really the first time I am thinking about moving to a different techno. How can internationalization be such a pain in the a*se to implement? – wiwi Jun 09 '17 at 16:58
  • For anyone coming from AngularJS with angular-translate, this official support is a major step backwards. Any app written with the flexibility of angular-translate will basically have to use ngx-translate instead. I really think the official documentation should mention ngx-translate as an alternative to the official approach. – IrishDubGuy Mar 13 '18 at 13:43
0

I am putting together a POC and the official documentation is cumbersome to say the least, so I tried ngx-translate http://www.ngx-translate.com/ and I literally had the hello world working in a few minutes, there are few caveats:

  1. I've read of people complaining about performance, because of the pipes, but reading the github issues, it seems that it is getting resolved
  2. It is only for i18n or Translations it does not deal with i10n or Localization
  3. There are few warning errors with Angular4 but it works anyways

long story short I liked ngx-translate if you have a small app and only need translation

I personally wanted Localization, so I am looking at https://github.com/robisim74/angular-l10n . It looks pretty good, but I haven't tested, so I'll let you know later, or you guys can go and we all try

Sebastian Castaldi
  • 8,580
  • 3
  • 32
  • 24