Search code examples
angularinternationalizationangular-cli

Update/Merge i18n translation files in Angular


We have recently decided to support multiple languages for our application (Angular 13.x). After researching, we decided to settle on using angular/localize package which seems great for our needs.

Everything seems to be working with the only problem of keeping the translation files upto date with subsequent builds and changes.

So following the guide here on Angular website https://angular.io/guide/i18n-common-translation-files we use ng extract-i18n cli tooling to generate a messages.xlf file

ng extract-i8n --format xlf --output-path src/locale/

The next step is copy the generate messages.xlf to different locales supported. For simplicity let's say we support french so we create a messages.fr.xlf in the same /locale subfolder. This gets translated by a third-pary service (yet to determine how to automate this - suggestions welcome). So far so good..

Now the question is around subsequent changes to the components and addition of new translations. The ng extract-18n would correctly generate the messages.xlf with the new and modified translations. But how do you update/merge the other locale files like messages.fr.xlf without overriding the existing changes? How can this be automated and the new changes be merged into this file? Am I missing something that the angular cli is already supporting?

I have come across this xliffmerge tool https://github.com/martinroob/ngx-i18nsupport/tree/master/projects/xliffmerge but this seems to be an old tool that does not seem to be supported for the newer versions of Angular past 9+.

I am assuming this is a fairly common problem for everyone and if Angular CLI is already supporting this.

Current version Angular 13.x

Thank you for your help.


Solution

  • 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