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

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! 🍻

Check out the comments plugin in the Transloco repo.

Here is some more great content about Transloco:

🚀 Introducing Transloco: Angular Internationalization Done Right

🎉 Good Things Come to Those Who Wait: What’s new in Transloco

Creating Search Engine-Friendly Internationalized Apps with Angular Universal and Transloco 🌐