DEV Community

Daniel Schreiber
Daniel Schreiber

Posted on • Edited on

6 2

Angular i18n update workflow

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
Enter fullscreen mode Exit fullscreen mode

and extraction and merging gets as simple as

ng run [PROJECT_ID]:extract-i18n-merge
Enter fullscreen mode Exit fullscreen mode

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

npm run extract-i18n-merge 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}

Enter fullscreen mode Exit fullscreen mode

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 :-)

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (4)

Collapse
 
jbb profile image
Justyna

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).
Enter fullscreen mode Exit fullscreen mode

Am I doing something wrong?

Collapse
 
danielsc profile image
Daniel Schreiber

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...

Collapse
 
yossimorgen profile image
ראובן יוסף מורגנשטרן

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

Collapse
 
danielsc profile image
Daniel Schreiber

This is the angular project id - also referenced as „app name“ - see e.g. angular.io/guide/workspace-config#...

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay