Static analysis of multilingual Angular application using ngx-translate-lint

ngx-translate-lint (assumes that the package is already used to localize the Angular application @ngx-translate/core).

Configuration

First you need to install the library using the command:

npm install ngx-translate-lint --save-dev

After installation, you need to create a configuration file in the project root, for example,
ngx-translate-lint.config.json and fill it with the following content:

{
  "rules": {
    "keysOnViews": "error",
    "zombieKeys": "error",
    "misprintKeys": "warning",
    "deepSearch": "disable",
    "emptyKeys": "error",
    "maxWarning": "0",
    "misprintCoefficient": "0.9",
    "ignoredKeys": [],
    "ignoredMisprintKeys": [],
    "customRegExpToFindKeys": ["(?<=['])([A-Яа-яёЁ0-9-.,!?() ]+)(?=['])"]
  },
  "project": "./src/app/**/*.{html,ts}",
  "languages": "./src/assets/i18n/*.json"
}

In it we can enable/disable rules and adjust the degree of their importance.
In field project it is necessary to specify a pattern for the files in which we will search for keys from localization files.
In field languages the path to the localization files is provided.
In field ignoredKeys you can add exceptions that match the regular expression, but they, for example, do not need to be translated.
In field customRegExpToFindKeysYou must specify a regular expression that will find keys from localization files in the project.
More details in documentation.

In my case, the application uses words and sentences in Cyrillic as keys for localization files:

// some-file.component.html
<span>{{ 'Скрыть всё' | translate }}</span>

// some-file.component.ts
this.translateService.instant('Активировать');

Localization files look like this:

// en.json
{
  "Скрыть всё": "Hide all",
  "Активировать": "Activate"
}

// ru.json
{
  "Скрыть всё": "Скрыть всё",
  "Активировать": "Активировать"
}

In this regard, a regular expression has been added that finds words and sentences in Cyrillic, including some punctuation marks and numbers between single quotes (agreement):

(?<=['])([А-Яа-яёЁ0-9-.,!?() ]+)(?=['])

For a more traditional use of localization files, where the key is something like confirmModalWindow.headera regular expression like:
(?<=['])([a-zA-Z.]+)(?=['])

Usage

After setting up the library, you can add a new command to package.json and run it, for example, before a commit or add it to your CI pipeline.

"lint:translations": "ngx-translate-lint --config ngx-translate-lint.config.json"

Conclusion

Using this library will allow you to conduct a static analysis of the multilingual functionality of your application and help avoid the following situations:

  • The developer forgot to add the translation to the localization file(s).
    Result: Error/Warning Key: 'Текст, которого нет в одном из файлов локализации' doesn't exist in 'ru.json'

  • The developer forgot to translate the text and left an empty key in the localization file.
    Result: Error/Warning Key: 'Пустой ключ' is empty in 'en.json'

  • The developer removed the old functionality, but forgot to remove the translations associated with this functionality.
    Result: Error/Warning Key: 'Текст, который не используется в приложении' doesn't exist in project'

  • The developer is not sure that all localization files (let’s say there are four of them) have all the keys, and checking manually is long and difficult.
    Result: Error/Warning Key: 'Текст, которого нет в одном из файлов локализации' doesn't exist in 'ru.json'

  • A developer is worried that he lost some translation while resolving merge conflicts in localization files.

  • The developer accidentally changed the object key in the localization file, deleted something from it, or changed the key in the project files, and now the localization does not work correctly.

  • It is necessary to introduce a new language into the system and the developer is worried that he will forget some translations.

As you can see, there is less room for error, which means that bugs related to translations will be fixed at the development stage and will not reach the testing stage.

I hope this material will be useful. Clean and productive code to everyone!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *