Angular i18n update workflow

#angular #i18n

Problem

Reading this, you are probably already aware, that tooling for updating internationalization files in angular is limited (non-existent). You can easily extract translation texts from your templates with the ng extract-i18n command - but it is not clear, how to merge new/removed/changed texts into already translated language files.

The core team does not see it as their responsibility - see angular/angular/issues/37655 and angular/angular-cli/issues/6552. There existed some tooling @ngx-i18nsupport on which the community relied, but sadly this is unmaintained and broken (and probably too complex for "fork and repair"...).

Solution

Update

As the below solution is a little cumbersome, I created a plugin that nicely integrates with Angular CLI: https://github.com/daniel-sc/ng-extract-i18n-merge
With that setup comes down to

ng add ng-extract-i18n-merge

and extraction and merging gets as simple as

ng run [PROJECT_ID]:extract-i18n-merge

or (if you confirmed to adding an npm command):

npm run extract-i18n-merge

I wrote two small tools, that solve the i18n merge problem: xliff-simple-merge and xml_normalize.

The following example setup illustrates how you can extract, merge and normalize (remove "notes", sort by ID, pretty print) translations for your angular app with a single command:

npm run i18n-extract

Setup to be included in "scripts" of package.json (assuming you use XLIFF 2.0 format):

{
  ...
  "scripts": {
    ...
    "i18n-extract": "ng extract-i18n --format xlf2 --output-path src/i18n && npm run normalize-xliff-base && npm run merge-xliff-all && npm run normalize-xliff-all",
    "merge-xliff-all": "npm run merge-xliff-de && npm run merge-xliff-fr",
    "merge-xliff-de": "node node_modules/xliff-simple-merge -i src/i18n/messages.xlf -d src/i18n/messages.de.xlf",
    "merge-xliff-fr": "node node_modules/xliff-simple-merge -i src/i18n/messages.xlf -d src/i18n/messages.fr.xlf",
    "normalize-xliff-all": "npm run normalize-xliff-base && npm run normalize-xliff-de && npm run normalize-xliff-fr",
    "normalize-xliff-base": "node node_modules/xml_normalize -n -i src/i18n/messages.xlf -o src/i18n/messages.xlf -r /xliff/file/unit/notes -s /xliff/file/unit/@id",
    "normalize-xliff-de": "node node_modules/xml_normalize -n -i src/i18n/messages.de.xlf -o src/i18n/messages.de.xlf -r /xliff/file/unit/notes -s /xliff/file/unit/@id",
    "normalize-xliff-fr": "node node_modules/xml_normalize -n -i src/i18n/messages.fr.xlf -o src/i18n/messages.fr.xlf -r /xliff/file/unit/notes -s /xliff/file/unit/@id",
  },
  "devDependencies": {
    ...
    "xliff-simple-merge": "0.4.0",
    "xml_normalize": "0.8.1"
  }
}

Other work

If you (as the developer) do the translations yourself, you might find a more integrated solution, like angular-t9n, better.

Feedback welcome!

If you have a better setup or suggestions for improvement I'd be happy, if you leave a comment :-)

Top comments (4)

Justyna • Oct 14

Hi!
Is it compatible with angular 18? (node 18)
I'm trying: ng add ng-extract-i18n-merge but gives me:
✖ Class extends value undefined is not a constructor or null
An unhandled exception occurred: Class extends value undefined is not a constructor or null

If I use npm, installation looks ok but in angular.json in the target extract-i18n I can not put more options than angular officially gives:

ng extract-i18n
Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(targetFiles).

Am I doing something wrong?

Daniel Schreiber • Oct 15

Hi!
Yes it is compatible with angular 18. Is it possible you use an outdated nodejs version or some other non-standard setup? In case the problem persists, please document this in an github issue: github.com/daniel-sc/ng-extract-i1...