23

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?

EDIT: xliffmerge seems to be unmaintained and incompatible with latest Angular versions (> 12). See answer by @daniel-sc for an option for latest Angular versions.

seBaka28
  • 932
  • 1
  • 7
  • 16

4 Answers4

22

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

David
  • 33,444
  • 11
  • 80
  • 118
  • Could you please elaborate a bit? I updated my question with the full command I am using. I also already use unique IDs, however when I rerun the command, there is a new file called messages.xlf which does not contain a single one of the existing translations. – seBaka28 Apr 06 '18 at 07:04
  • @seBaka28 and where is your 'real' translation file? name/location? – David Apr 06 '18 at 07:07
  • messages.en.xlf is in src/locale/ - same location where the new messages.xlf is after generation – seBaka28 Apr 06 '18 at 07:13
  • I edited my answer. I was actually so sure that the native tool could merge by default that I had not even tried (I'm right in the middle of it in my project!) – David Apr 06 '18 at 08:15
  • Thanks for the answer. Is this still the best approach for updating/merging new translations, especially when adding new html files (I am using Angular 10)? – Ray Jan 05 '21 at 23:55
  • @Ray Don't know, we haven't moved to angular 10 yet – David Jan 06 '21 at 11:45
  • 4
    @Ray The problem is that the tool [ngx-i18n-support](https://www.npmjs.com/package/ngx-i18nsupport) seems to be no longer updated (the last update was two years ago). Therefore it uses things from i18n that are **deprecated** (e.g. `i18nFile`, `i18nFormat` and `i18nLocale`). It still works under Angular 11, but in the future this could become a problem. I haven't found a better option yet. – nclskfm Jan 22 '21 at 12:27
10

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

(Transparency: I created this library.)

daniel-sc
  • 1,139
  • 11
  • 23
0

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

svassr
  • 5,538
  • 5
  • 44
  • 63
  • @bergacat1 just follow the instructions to insall xliffmerge here : https://github.com/martinroob/ngx-i18nsupport/tree/master/projects/xliffmerge. I will create a new npm scripts task which use ng build with the proper options. – svassr Jul 15 '19 at 19:20
0

Since the ngx-i18nsupport-package will not be developed anymore we are now using rvanbekkum.xliff-sync for this issue which works like a charm.

anion
  • 1,516
  • 1
  • 21
  • 35