Skip to main content

Angular

info

Some manual changes may still be required after the script has executed.

The script will iterate over all your HTML files, build a translation file and will execute the replacements described below.

Command​

ng g @jsverse/transloco:migrate
# On an nx workspace
nx g @jsverse/transloco:migrate

The Translation file​

The script will extract all the translations from the HTML files and will construct a translations JSON file. The script will use the translation string as the key by making the entire string kebab case (My sample string => my-sample-string) example for the output JSON:

en.json
{
  "my-sample-string": "My sample string",
  "my-title": "My title"
}

Here is an example of an HTML section and the matching JSON output:

<h1 i18n>translation value</h1>
<h1 i18n="site header|value 1 sample">Val1</h1>
<h1 i18n="site header|value 2 sample">Val2</h1>
<h1 i18n="other context|another comment@@myId">Val3</h1>

Will output:

en.json
{
  "translation-value": "translation value",
  "site header": {
    "val1": "Val1",
    "val1.comment": "value 1 sample",
    "val2": "Val2",
    "val2.comment": "value 2 sample"
  },
  "other context": {
    "myId": "Val3",
    "myId.comment": "another comment"
  }
}

Note: the .comment is the way we support comments in Transloco.

Directives​

The i18n & i18n-<attribute> directives will be replaced with the transloco pipe:

before.html
<h1 i18n>Hello World</h1>
<h1 i18n="other context|another comment@@myId">Some value</h1>
<img src="..." i18n i18n-title="Wow image" />
after.html
<h1>{{ 'hello-world' | transloco }}</h1>
<h1>{{ 'some-value' | transloco }}</h1>
<img src="..." title="{{ 'wow-image' | transloco }}" />

If you encounter any issues with the migration script please open a Github issue so we can resolve them and make a better experience for all.