How to handle angular 11 extract-i18n overriding existing translations?

Question

So i have a angular 11 application where i just implemented localization with angulars default i18n middleware.

To create an initial file i just ran :

ng extract-i18n myprojectName --format xlf --output-path src/i18n  --out-file messages.da.xlf --progress

all was good and i got an messages.da.xlf file with default language translations.

Now i wanted to translate the application to english.

I copied messages.da.xlf file and named it messages.en.xlf and translated everything.

Everything is great an working right now.

But now i have an issue, next time i add an additional text to be translated english translation is not updated.

So my question is when i need to extend translation because of new features in the application how do i know which additional "fields" i have to add to all translation files and if there is a way to do it automaticaly?

Answer 1

There is no built-in way of doing this in Angular so you need a 3rd party tool. The only free tool that I have found is the now unmaintained Xliffmerge. The documentation is targeting older versions of Angular but after some experimentation I found that it’s enough to install the @ngx-i18nsupport/tooling package:

npm install -D @ngx-i18nsupport/tooling --legacy-peer-deps

Then we can add new languages to the configurations in angular.json under projects -> projectName -> architect -> xliffmerge.

"xliffmerge": {
  "builder": "@ngx-i18nsupport/tooling:xliffmerge",
  "options": {
    "xliffmergeOptions": {
      "defaultLanguage": "en-US",
      "languages": ["nb"]
    }
  }
}

After adding new translations we can extract them and migrate them to our translation files by running this script:

ng extract-i18n && ng run projectName:xliffmerge

We get a couple of warnings running the script which tells us its working!

WARNING: merged 1 trans-units from master to "nb"
WARNING: please translate file "messages.nb.xlf" to target-language="nb"

I have written more about this on my blog.

Answer 2

An alternative/new solution (to the unmaintained ngx-i18nsupport) is https://github.com/daniel-sc/ng-extract-i18n-merge

After installing via

ng add ng-extract-i18n-merge

translations will be extracted and merged with the command:

ng extract-i18n

(Transparency: I created this library.)