Help the Translator by Using Transloco: The internationalization (i18n) library for Angular

Originally published at shahar.kazaz

There are times where we need to help the translator with a description and meaning. To translate a text message accurately, the translator may need additional information or context.

Let's take for example the following translation key:

{
  "book": "Book"
}

Is this a "book" or to "book" something? We need to communicate to our translators the translation context.

Let's learn how we can use Transloco the internationalization (i18n) library for Angular in order to provide the translators with these type of comments.

For each translation key that requires a description, we can add a companion key post-fixed with .comment, as shown in the example below:

{
  "book": "Book",
  "book.comment": "we mean a reading book"
}

Now, We don't want these keys to get into our final bundle, so we can remove them using an official transloco library when building the production environment.

First, we need to install the library:

npm install @ngneat/transloco-remove-comments

Then, we need to add to the package.json the following script:

"scripts": {
  "remove-comments": "transloco-remove-comments dist/appName/assets/i18n",
  "build:prod": "ng build --prod && npm run remove-comments",
}

Now when we build the production environment, the library will take care of removing these keys from the translation files specified in the path.

Once again, Transloco has made our life more comfortable. Cheers! 🍻

Here is some more great content about Transloco: