Angular i18n update workflow
Tags: angular, i18n
Published: 2022-01-20 14:21:59

## Problem
Reading this, you are probably already aware, that tooling for updating [internationalization files in angular](https://angular.io/guide/i18n-overview) 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](https://github.com/angular/angular/issues/37655) and [angular/angular-cli/issues/6552](https://github.com/angular/angular-cli/issues/6552). There existed some tooling [@ngx-i18nsupport](https://github.com/martinroob/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**
```shell
ng add ng-extract-i18n-merge
```
**and extraction and merging gets as simple as**
```shell
ng run [PROJECT_ID]:extract-i18n-merge
```
or (if you confirmed to adding an npm command):
```shell
npm run extract-i18n-merge 
```
---



I wrote two small tools, that solve the i18n merge problem: [xliff-simple-merge](https://github.com/daniel-sc/xliff-simple-merge) and [xml_normalize](https://github.com/daniel-sc/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:
```bash
npm run i18n-extract
```

Setup to be included in "scripts" of `package.json` (assuming you use XLIFF 2.0 format):
```json
{
  ...
  "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](https://github.com/kyubisation/angular-t9n), better.

## Feedback welcome!
If you have a better setup or suggestions for improvement I'd be happy, if you leave a comment :-)