CEO and founder of Lingohub. Envisioning a multilingual digital world. Email me if you have questions about how Lingohub can help you take your products global.

Helmut Development 1 Comment

SHARE

Angular i18n update from ng-conf 2015

Angular 2 will change a lot (RIP everything you know) – also the client-side i18n support. Chirayu Krishnappa and Pascal Precht gave a talk on this year’s ng-conf in Salt Lake City about how to use i18n for future Angular apps. Currently there is no standard how you localize your angular app – we are using angular-translate from Pascal Precht. It is working great with JSON files + LingoHub. (Wanna try? Just create an Angular project on LingoHub and upload your JSON files).

New Angular i18n usage and tooling

Your texts (which should be translated) stay in the HTML templates. But a translator can’t use HTML to translate, that is why Angular will offer an Extraction Tool. This tool extracts texts (also texts from placeholders) from your HTML templates. It will support different (standard translation) file formats, for example XLIFF or PO.

i18n-process-5

from ng-conf talk “Better i18n for your Angular apps”

A good solution lets you localize your apps in whatever shape they are.Chirayu Krishnappa & Pascal Precht

LingoHub already supports that kind of formats, so you will have no problems giving your translators a nice UI to translate your texts on LingoHub!

These two code examples show you the main differences between angular-translate and the Angular i18n approach with the new Message Extraction Tool.

<a href="https://lingohub.com/projects" translate="projects_link"></a>

en.json: { "projects_link": "Projects" }

LingoHub creates:
de.json: { "projects_link": "Projekte" }
<a i18n href="https://lingohub.com/projects">Projects</a>

Extraction (e.g. XLIFF - a sample excerpt):
<file source-language="en" datatype="plaintext" original="ng2.template">
  <body>
    <trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca">
     <source>Projects</source>
    </trans-unit>
  </body>
</file>

LingoHub creates:
<file source-language="en" target-language="de" datatype="plaintext" original="ng2.template">
  <body>
    <trans-unit id="a05c3a315a6ee3e6ad4733a1f72e8d16775810ca">
     <source>Projects</source>
     <target>Projekte</target>
    </trans-unit>
  </body>
</file>

Angular 2 Tool then generates JSON or HTML templates for different languages. (At the moment it is not yet sure how the generated JSON will look like)

An important feature will be that you can add context for the translator so that he knows what the text actually means, just by adding the i18n attribute to the HTLM tag. I am going to write another blogpost about how the process will work once the Extraction Tool is available (probably in May 2015)!

You will find first implementations of the new i18n ecosystem already in Angular 1.4, where they will add support for pluralization and gender.

All these changes sound very exciting and is definitely a step towards easy translation of an Angular app. Of course LingoHub will support both approaches. Be Global, Go Local!

References:
Better i18n for your Angular apps (Chirayu Krishnappa and Pascal Precht)
Special Thanks to Pascal Precht for additional information