Angular2 i18n at this point?
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 provideTRANSLATIONS
,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 throughId
, ties with html by a value of<source>
tag inxlf
- currently
xlf
files are not used directly; a.ts
file is manually created to wrap the content ofxlf
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 youri18n.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.
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.
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