Translation Files Validation in Angular with Transloco And Husky

Originally published at shahar.kazaz

When working on an enterprise application and with multiple teams, it’s often the case where we have merge conflicts with one of the translation files.

In this case, we can accidentally break the file by forgetting an extra comma, for example:

{
  "key": "",
  "keyTwo": "", <====
}

Which leads to an invalid JSON. In most cases, the developer doesn’t notice this change and pushes the code to production or staging environments, and brokes that app.

Here in Transloco, we take such things seriously, and to prevent this, we created a linter that will verify the translation files before they pushed.

In addition to that, it will also check that it does not contain duplicate keys.
Let’s see how we use it:

• Set up husky and lint-staged
• Run npm i @ngneat/transloco-validator --save-dev

Update your package.json file:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/assets/i18n/*.json": ["transloco-validator"]
  }
}

This will make sure no one accidentally pushes an invalid translation file.

If you liked this post, please 👏🏻 and share it!

---

Here is some more great content about Transloco:

Introducing Transloco: Angular Internationalization Done Right

Lazy Load Translation Files In Angular Using Transloco

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