angular-i18n Angular 6 Internationalisation : How to deal with variables

Asked 13/6, 2018 at 14:24 Answered 14/10, 2018 at 4:14

I've read the entire doc here : https://angular.io/guide/i18n

I can't make heads or tails of how I'm supposed to handle a html tag of this nature :

<div i18n="@@myId" class="title-text">{{currentPage}}</div>

or one like this :

<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>

it doesn't mention any variable text at all as if they just assume we'd have all our names and text hard coded into the html.

a language file is supposed to look like this :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Hello</source>
        <target>Bonjour</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Am I to do something like this to handle the multiple possibilities of the var?

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Title 1</source>
        <target>Titre 1</target>
        <source>Help 2</source>
        <target>Aide 2</target>
        <source>New 3</source>
        <target>Nouveau 3</target>
      </trans-unit>
    </body>
  </file>
</xliff>

I don't think that'll work. How do I handle variables?

UPDATE :

if I use their language file generation tool :

ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr

I get :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
          <context context-type="linenumber">85</context>
        </context-group>
        <note priority="1" from="description">the title of the current route</note>
      </trans-unit>
    </body>
  </file>
</xliff>

pretty sure equiv-text="{{currentPage}}" is garbage. but It may yet work need to test. in the meantime I can't get ng serve to accept the new configs.

UPDATE AGAIN :

to get ng serve --configuration=fr to work

you have to edit angular.json further, it's not specified in the official docs but they do talk about it here : https://github.com/angular/angular-cli/wiki/stories-internationalization

Well I added a <target>Title</target> and it works but of course this implies that right now every single value for the var returns "title" no matter what.

also upon placing the i18n tags everywhere, I ran into this in my code :

 <dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>

so what now? how do I translate the message passed to the dropzone?

Ylla answered 13/6, 2018 at 14:24 Comment(1)

Why does an element with no actual text need to be translated? – Kristopherkristos 3/6, 2019 at 16:36

This polyfill seems like the best way to go right now - it's mainly written by Olivier Combe, a member of the Angular team responsible for i18n:

https://github.com/ngx-translate/i18n-polyfill

For Angular 5, you'll need version 0.2.0 when you install:

npm install @ngx-translate/[email protected] --save

For Angular 6, get the latest version - currently 1.0.0:

npm install @ngx-translate/[email protected] --save

I got the polyfill working for both JIT and AOT compilation, for Angular 5 (it will also work for Angular 6). Here's what you need to do to translate to a single language (this is a good way to get this working - you can then get multiple languages working later):

Note on using AOT compilation: If you're using AOT compilation to translate your templates, translation of the messages in .ts files will still be done at runtime using JIT compilation (that's why you need to reference TRANSLATIONS and TRANSLATIONS_FORMAT instead of just registering them in your build scripts).

app.module.ts

Add the following imports to your root Angular module:

import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

add the following constant, and specify the providers in your root module:

// add this after import + export statements
// you need to specify the location for your translations file
// this is the translations file that will be used for translations in .ts files

const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({ ....

  providers:
  [
    I18n,
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    ...

*.ts

In the .ts file where you want to provide a translation, add this:

import { I18n } from '@ngx-translate/i18n-polyfill';

constructor(private i18n: I18n) {
    console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}

This demonstrates that you can even include interpolations in the messages that you want to translate.

You can use i18n definitions (i.e. using specifying the translation 'source' id, meaning, description) like this:

this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})

You'll still need to extract the messages, and you can use the ngx-extractor tool to do this. See the readme on the polyfill page.

All of this is compatible with xliffmerge, which is a great tool for automatically merging any new translations you add, without overwriting existing translations. Xliffmerge can also automatically perform translations using Google translate (you'll need a Google translate API key). For this to work, I do the extraction and merging/translation in the following order, before I do the actual AOT build:

"extract-i18n-template-messages": "ng xi18n --outputPath=src/locale --i18n-format=xlf",
"extract-i18n-ts-messages": "ngx-extractor --input=\"src/**/*.ts\" --format=xlf --out-file=src/locale/messages.xlf",
"generate-new-translations": "xliffmerge --profile xliffmerge.json en fr es de zh"

The AOT build for a specific language version of the site looks like this:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

Current status of this polyfill:

This is mainly written by Olivier Combe, a member of the Angular team responsible for i18n. At this stage this it's a 'speculative' polyfill for translating variables or strings in the .ts file. It's likely to be replaced by an API built into Angular which will be very similar, so upgrading later should be reasonably manageable. Here's the diclaimer from the Github page:

This library is a speculative polyfill, it means that it's supposed to replace an API that is coming in the future. If the API is different, a migration tool will be provided if it's possible and necessary.

There's been some discussion around support in forthcoming minor versions of Angular 6 for translations of variables/strings in code.

Here's a quote from Olivier Combe (from March this year), from the following discussion on Github:

https://github.com/angular/angular/issues/11405

The first PR for runtime i18n has been merged into master, along with a hello world demo app that we will use to test the features. It works at runtime, and support theoretically code translations, even if there is no service for it yet. For now it's very minimal support (static strings), we're working on adding new features (I'll make the extraction work next week, and then dynamic string with placeholders and variables). After that we'll do the service for code translations. As soon as a new feature is finished it gets merged into master, you won't have to wait for a new major.

Cecum answered 18/6, 2018 at 5:27 Comment(10)

Ah so it is indeed something that's "to-be-implemented" the polyfill you linked will do nicely for now. ---how does it work? Thanks! – Ylla 18/6, 2018 at 7:9

also any ideas for the dropzone tag? – Ylla 18/6, 2018 at 9:9

I can't run it successfully. Can you? As soon as I add constructor(i18n: I18n) { like it says in the doc. My app crashes at the browser stage. the stuff above that bit in their readme doesn't cause the app to crash. – Ylla 18/6, 2018 at 12:42

I've currently got a test working. I've updated my answer so you can at least see how to get this running. – Cecum 19/6, 2018 at 1:0

I've posted another answer to a more general question about converting message in .ts. files here - #48327901. I got this fully running for translating multiple languages, and integrating with xliffmerge for automatic merging and translation of i18n messages. The other answer gives all of the details. – Cecum 21/6, 2018 at 4:52

thanks. Still haven't gotten around to the i18n branch again to check if it works but that should happen very soon thank you again for the help! – Ylla 21/6, 2018 at 7:58

I am stuck on step with require. cause TypeScript 3.0 rejects to eat this expression. I have angular 7. – Gladiate 21/12, 2018 at 2:7

@Daneel S. Yaitskov, does this help - #53116165 What error do you get? – Cecum 21/12, 2018 at 7:33

This is an amazing explanation. Thanks for you work. – Flaunt 4/7, 2019 at 18:11

Quick note, now you need to load the default loader like this: const translations = require('raw-loader!./i18n/messages.ko.xlf').default; – Dement 30/12, 2019 at 13:37

Given the official instructions "translating-plural-and-select-expressions", (overview) now here can't you do ? :

<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>

Fascista answered 14/10, 2018 at 4:14 Comment(1)

Link has moved: angular.io/guide/… – Centurial 23/2, 2022 at 8:0

app.module.ts

*.ts

Current status of this polyfill:

Recommended topics

Hot tags