Angular 9: i18n in TypeScript

Question

I studied the new i18n feature in Angular 9. https://angular.io/guide/i18n

How to translate text in TypeScript, e.g. SnackBar messages?

Answer 1

Here is some scripts which can be used to extract html + ts side localizations to xlf file. So you use $localize like @Cyclion suggests. This solution uses Ocombe's locl cli package https://www.npmjs.com/package/@locl/cli First you need to build your project without localization.

ng build ProjectName --localize=false

Then you can extract translations from "binary js"-files using locl tool. I use 0.0.1-beta.6 -version because it doesn't generate target parts in xlf file. Those target parts will ruin merge with xlf-merge. And also ng xi18n tool doesn't generate those target parts as well so structure is consistent after merge.

npx locl extract -s='dist/ProjectName/**/*.js' -f=xlf -o='projects/ProjectName/src/locale/messages_extracted.xlf' --locale=fi

Then you can combine ng xi18n result and this result. This contains every translations from html and ts but without meta data what ng xi18n command provides from html side translations. I use xlf-merge for this.

xlf-merge ./projects/ProjectName/src/locale/messages_extracted.xlf projects/ProjectName/src/locale/messages.xlf -o projects/ProjectName/src/locale/messages.xlf

This merge command will add every missing ts side translations to end of messages.xlf-file

Here is whole script.

ng xi18n --project=ProjectName --output-path src/locale && ng build ProjectName --localize=false && npx locl extract -s='dist/ProjectName/**/*.js' -f=xlf -o='projects/ProjectName/src/locale/messages_extracted.xlf' --locale=fi && xlf-merge ./projects/ProjectName/src/locale/messages_extracted.xlf projects/ProjectName/src/locale/messages.xlf -o projects/ProjectName/src/locale/messages.xlf

And after these steps you have all translation tags in messages.xlf. Then you need to generate/translate each language files using for example xliffmerge tool.