Angular2 i18n at this moment?

Question

We decided to drop it, and we started a new project using Angular2. So far so good, but now we are facing a problem. At the moment, what is the correct approach to i18n for Angular2? We explored a bit and found this:

• https://github.com/angular/i18n

However, the last fix is ​​more than 5 months ... It does not seem like an active development.

Has anyone tried using angular-translate or angular-gettext? Or maybe with Angular2 it is better to wrap something JS like i18next? Could anyone share their thoughts? Maybe you are faced with the same problem?

Answer 1

Plunk has been upgraded to Angular 2 Final : https://plnkr.co/edit/4euRQQ . Everything seems to work the same way as in RC7.

Angular 2 white papers have added the i18n section. Basically, he explains in detail what happens in the plunkr above.

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

package.json

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

and

 npm run i18n 

For more information about merging a translation with a component template, see Merge translation . This was done using the SystemJS Text plugin.

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

Older employees : Update based on RC7 and links provided by Herman Franzel:

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

Comments on plunkr:

• bootstrap should provide TRANSLATIONS , TRANSLATIONS_FORMAT , LOCALE_ID values ​​-> translation settings
• Translatable elements in html templates must use the i18n directive
• translations are stored in a .xlf file. Links between languages ​​are done using Id , links to the html value of the <source> in xlf
• xlf files are not currently used directly; a .ts file is created manually to wrap the contents of xlf in the exported variable. I think this should work automatically in the final release (maybe even now).

This is the first officially documented approach I have found. However, it is still barely useful. In the current implementation, I see the following problems:

• The language is set to bootstrap , cannot change it at run time. This should be changed in Final.
• The identifier of the translated element in xlf generated by the SHA. The current way to get this identifier is a bit confusing: you create a new translation element, use it, copy the SHA-id from the error, and paste it into your i18n.lang.xlf file.

There is a lot of traction request documentation regarding the i18n

Old employees : Release notes https://github.com/angular/angular/blob/master/CHANGELOG.md have an entry

i18n : merge translations 7a8ef1e

In Angular 2 RC5

i18n large fragment was added

Unfortunately, the documentation is not available.

Answer 2

Anyone who wants official implementation, but this worked for my use case: https://github.com/ocombe/ng2-translate

README is thorough enough, and if you need something real (for me it was code separation), the code itself is not too long or hard to read.

Answer 3

I18n support is now official in Angular 2 RC6

Official Release Blog:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

Internationalization pattern with Angular 2 RC6
https://github.com/StephenFluin/i18n-sample

Learn more about how the new i18n concept works in angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

Answer 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

Answer 5

The official i18n support in Angular.io is here:

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

But! As mentioned in the docs:

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

This makes this feature useless in most cases ...

If you will not use it without the CLI, as described here:

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

Answer 6

I am collecting POC and the official documentation is at least cumbersome, so I tried ngx-translate http://www.ngx-translate.com/ and I literally had a hi world working for a few minutes, there are a few warnings :

• I read about people complaining about performance due to pipes, but reading github issues it seems to be getting resolved.
• Only for i18n or Translations, it does not deal with i10n or localization
• There are several error warnings with Angular4, but it works anyway

short short story I liked ngx-translate if you have a small application and need translation

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