Updates to i18n translation files in Angular

Question

I am currently in the process of adding en locale to an Angular App we are using at my company. After some thinking we decided to go with the Angular 5+ native i18n support.

From how I understand it however, everytime the translation file is generated with ng xi18n --outputPath src/locale/ --locale en a new file is created. This means, that every time a new i18n tag is added, the previous XLF file which already contains the old translations, needs to be merged with the new translations.

This seems highly bothersome, therefore my question: Is there a way such that the new trans-units are just appended to the already existing XLF file? Or is there already a tool which can merge these two together?

Answer 1

I Had some issue with previous solution : ERROR: language [...] node_modules\@ngx-i18nsupport\ngx-i18nsupport\xliffmerge\xliffmerge" is not valid

I used xliffmerge with angular-cli : https://github.com/martinroob/ngx-i18nsupport to extract/merge i18n. It generates for you the commands in package.json and the config for new task in angular.json. It keeps the context-groups and notes when merging.

I just had to change the default settings in package.json and angular.json for my chosen output-path "src/locale".

Answer 2

Edited answer

You can use the xliffmerge tool. It can merge translation files after you've added new translations in your html

Here is a tutorial for angular

Basically after running your normal extract command you call xliffmerge and pass the language(s) for which you want to generate translation files

ng xi18n --outputPath src/locale/ --locale en && xliffmerge --profile xliffmerge.json en fr

You can specify a json config for the tool

{
  "xliffmergeOptions": {
  "srcDir": "src/locale",
  "genDir": "src/locale"
   }
}

Original answer

Try setting custom ids to your translations

https://angular.io/guide/i18n#set-a-custom-id-for-persistence-and-maintenance

<h1 i18n="@@introductionHeader">Hello i18n!</h1>

Nex time you run the extract command, it'll just add the new blocks but won't touch the existing ones

Btw I think going with the native option is a good choice, since the maintainer of the main alternative (ngx-translate) is actually working with the angular team on the native approach