Angular2 i18n at this point?

Asked 14/1, 2016 at 18:54 Answered 4/5, 2017 at 11:49

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:

https://github.com/angular/i18n

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?

Floatplane answered 14/1, 2016 at 18:54 Comment(10)

I've found ng2-translate. I'll give it a spin and share the experience here :D. – Floatplane 14/1, 2016 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... Please share your experience with ng2-translate... – Micromho 14/1, 2016 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. – Kamakura 14/1, 2016 at 23:53

@AdamNowaczyk did you try and use ng2-translate? I am too looking for a solution... – Hook 3/2, 2016 at 13:49

Not yet present in the latest beta of Angular2, but I prefer to wait for the official module. – Prichard 6/3, 2016 at 12:1

They are currently working on it. I saw a few pull requests recently. – Samaniego 9/3, 2016 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 <lang>.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. – Binetta 29/4, 2016 at 6:59

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. – Socialite 9/9, 2016 at 20:21

I've wrote a blogpost about this: lingohub.com/blog/2016/10/… comparing angular-translate with the Angular 2 approach – Plat 20/10, 2016 at 9:20

regarding i18next, there's a nice tutorial blog post: locize.com/blog/angular-i18next – Differential 23/8, 2022 at 9:11

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.

Forestation answered 17/8, 2016 at 18:40 Comment(8)

Could you find anything about the roadmap for this? I don't like how much code you have to use with ng2-translate. – Sunburst 29/8, 2016 at 11:11

Indeed, ng2-translate is quite verbose. i18n roadmap is in github.com/angular/angular/issues/9104. – Forestation 29/8, 2016 at 11:57

I just found this pull request for the documentation:github.com/angular/angular.io/pull/2309 – Immensurable 13/9, 2016 at 6: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. – Furore 16/9, 2016 at 20:4

@estus, indeed, this approach doesn't work. It was mentioned in a proposal. I removed it from my answer – Forestation 16/9, 2016 at 20:29

Is it possible to store in a .json instead .xlf? – Toxic 1/10, 2016 at 8:16

Hey, can we change language at runtime. It is ok it if reload the app. Kindly reply – Klimesh 4/1, 2017 at 6:38

Using i18n Can we change language at runtime now or is there any way to set language on based on browser language? – Klimesh 5/1, 2017 at 9:52

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.

Underquote answered 9/3, 2016 at 15:51 Comment(2)

be carefull using that library, it is using an impure pipe, which fires at every single change of the component... not good performance – Bitchy 17/8, 2016 at 19:48

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. – Omarr 20/8, 2016 at 16:32

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

Phonologist answered 6/9, 2016 at 11:14 Comment(7)

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! – Crucify 9/9, 2016 at 8: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. – Radiochemical 9/9, 2016 at 12:46

And it appears that they are using some algorithm to SHA the XLIFF Id to the value of the <target>text</target> ? I tried changing the XLF in the i18n-sample around and I get errors related to that. – Dx 12/9, 2016 at 19:1

Thanks for mentioning my old blogpost ;) There is now a new blogpost about this: lingohub.com/blog/2016/10/… comparing angular-translate with the Angular 2 approach – Plat 20/10, 2016 at 9:21

Does somebody know how you would translate a attribute value itself? e.g. <a href="#" title="Translate me">Link</a> ? – Kalakalaazar 12/11, 2016 at 17:9

Can we change language at runtime now or is there any way to set language on based on browser language. – Klimesh 5/1, 2017 at 9: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. – Cowbind 7/4, 2017 at 12:15

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

Lickspittle answered 11/10, 2016 at 8:7 Comment(1)

This looks like github.com/ocombe/ng2-translate... which works fine out of the box... – Earl 29/11, 2016 at 23:28

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/

Napier answered 4/5, 2017 at 11:49 Comment(2)

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? – Hammers 9/6, 2017 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. – Cyst 13/3, 2018 at 13:43

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:

I've read of people complaining about performance, because of the pipes, but reading the github issues, it seems that it is getting resolved
It is only for i18n or Translations it does not deal with i10n or Localization
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

Physician answered 13/4, 2017 at 13:49 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags