Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 i18n at this point?

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?

like image 354
Adam Nowaczyk Avatar asked Jan 14 '16 18:01

Adam Nowaczyk


People also ask

What is the meaning of i18n?

Internationalization (sometimes shortened to "I18N , meaning "I - eighteen letters -N") is the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localization .

Why is internationalization called i18n?

Internationalization (i18n) Example Internationalization is also called i18n (because of the number of letters, 18, between “i” and “n”). Internationalization ensures your software is localizable and is typically done by software developers and engineers.

What is i18n locale?

In computing, internationalization and localization (American) or internationalisation and localisation (British English), often abbreviated i18n and L10n, are means of adapting computer software to different languages, regional peculiarities and technical requirements of a target locale.

What is i18n attribute?

Use the i18n attribute to mark a static text message in your component templates for translation. Place it on every element tag that contains fixed text you want to translate. The i18n attribute is a custom attribute that the Angular tools and compilers recognize.


5 Answers

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.

like image 107
Andrei Zhytkevich Avatar answered Sep 30 '22 23:09

Andrei Zhytkevich


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.

like image 23
Samjones Avatar answered Sep 30 '22 22:09

Samjones


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

like image 30
Herman Fransen Avatar answered Sep 30 '22 21:09

Herman Fransen


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

like image 28
vinboxx Avatar answered Sep 30 '22 21:09

vinboxx


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/

like image 41
trojan Avatar answered Sep 30 '22 21:09

trojan