Angular

info

some manual changes might still be needed after the script ran.

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

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.