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)
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:
Am I doing something wrong?
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...
can you specify what do you mean by project id?
because i tried the name and the id i created on firebase and it didn't work
This is the angular project id - also referenced as „app name“ - see e.g. angular.io/guide/workspace-config#...