Angular 5 - Translating Strings in TypeScript

Question

I am using i18n for my tranlsations and am happy with how this works on the html side.

However if I have error messages etc defined in strings in my typescript I would like a way to translate these and can't find a way to do it.

Is there a workaround to achieve this?

Labonte

Answer 1

This is not possible through the library's API until now (@angular/language-service v7.2). Anyway, you can see my answer under another similar question for a workaround.

Vorticella

This looks exactly like what I was looking for, and should probably be the accepted answer, thanks! – Moncrief

Answer 2

With Angular 9+ you can do this

let <local_variable> = $localize`:@@<unique_id>:<optional_text>`

Example: let err_msg = $localize`:@@err_username:Invalid username, please check your inputs`;

As of now you cannot auto extract these variables automatically using npm script. You have to manually add it like this

In messages.xlf file

<trans-unit id="err_username:Invalid" datatype="html">
      <source>Invalid username, please check your inputs</source>
</trans-unit>

In messages.lang.xlf file (translation file for language

 <trans-unit id="err_username:Invalid" datatype="html">
      <source/>
      <target>Ungültiger Benutzername, bitte überprüfen Sie Ihre Eingaben</target>
 </trans-unit>

Innervate

This is correct, but keep in mind that this is not officially supported yet. Translations made in TypeScript will not be supported by xi18n and in Angular Libraries this will cause issues since they must be published without Ivy (v9) – Fallal

Answer 3

There is an open question on Angular GitHub repo.

For more info, check this out. Unfortunately, typescript's strings are not supported yet officially. However, some devs proposed a few workarounds you could take a look at.

Scend

the final solution there is to use github.com/ngx-translate - this lib support angular 7 and also translate inside typescript class and not only inside templates – Pyongyang