-
Notifications
You must be signed in to change notification settings - Fork 69
ngx translate usage
Martin Roob edited this page Mar 17, 2017
·
11 revisions
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.
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 withngx-translate
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>
You have to activate the translate feature by adding the following line to your profile xliffmergeconfig.ts
:
{
"xliffmergeOptions": {
...,
"supportNgxTranslate": true
}
}
Then yoy 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"
}
}
TODO work in progress