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.