ngx translate usage

xliffmerge has some tooling for ngx-translate (starting with version 0.2.0).

It supports extraction of translation files for ngx-translate (json-files) from the translated xlf or xmb-files.

How to use it

The general idea is

• put the texts, that you want to use with ngx-translate, into a template of a component of your app.
• translate it together with all other messages in the normal way.
• let xliffmerge generate a translation file to be used with ngx-translate

Create a component containing the ngx-translate relevant texts

This component will never be shown in your application. It is only used to get the messages extracted.

# create a component using angular-cli
cd myapp/src/app
ng g c NgxTranslateData

Mark the messages with i18n="my.app.key|ngx-translate".

<!-- ngx-translate-data.component.html -->
<h1>Data used with ngx-translate</h1>
<p>This component will never be shown in the app</p>
<ul>
  <li i18n="appTitle|ngx-translate">Sample App Title</li>
  <li i18n="messages.example|ngx-translate">{{priority}}: A message from a service</li>
</ul>

Extract the data

You have to activate the translate feature by adding the following line to your profile xliffmergeconfig.ts:

{
  "xliffmergeOptions": {
    ...,
    "supportNgxTranslate": true
  }
}

Then you can just run the normal extraction (described in the tutorial):

npm start extract-i18n

and finally you should find a json file for every language (in genDir, which is typically src\i18n):

// src/i18n/messages.en.json
{
    "appTitle": "Sample App Title",
    "messages": {
        "example": "{{0}}: A message from a service"
    }
}

To get translated versions, just follow the normal workflow. Send the xliff to a translator, get back the translated version, check in, rerun extraction.

Use the translation data in your code

Comparison ng i18n and ngx-translate

TODO work in progress