Revolutionizing Translation Management: Lessify Tools for Efficient JSON File Merging

Alex Cibotari — Thu, 04 Jan 2024 08:48:28 +0000

Introduction

In single-page applications like Angular, we use @ngx-translate/core or @ngneat/transloco. Managing all translations in one file will be challenging and unmaintainable in the long term. There is a solution to solve it if you store all your internationalization keys in the project.

The Translation Dilemma

I will compare translations with CSS, in a project you have two types of CSS or Translations :

Global Level - the one used across whole applications and is reusable, like "OK", "Cancel", "Back", and others.
Component Level - Specific to that component only translations, for example for the Login Page Component it will be: "Login", "Sing-Up", "Combination of user and password is wrong", and others

Keeping them in one file will create problems, as it will grow without control of your application and will slow down the initial payload. Same time when you delete a component, you will need to search for all used translations in a huge file per language.

Lessify Angular Tools

What if you can have those Translations at the same level as you use them at the component or the module level?

├─ login ( merge them in one sub-folder )
   ├─ login.component.ts
   ├─ login.component.scss
   ├─ login.component.html
   ├─ i18n //login component only translations
      ├─ en.json
      ├─ de.json
├─ login ( keep them in the same folder )
   ├─ login.component.ts
   ├─ login.component.scss
   ├─ login.component.html
   ├─ en.json
   ├─ de.json
├─ shared
   ├─ i18n //global translations
      ├─ en.json
      ├─ de.json

In this way, they are a natural part of your application.

With Angular Lessify Tools you can merge them in one at build time :

Install :

npm i -D @lessify/angular-tools

Configuration lessify.json:

{
  "cwd": "./src/app",
  "output": "./src/assets/i18n",
  "languages": ["en", "de", "fr", "it"]
}

For more details, you can find the official documentation

Add to your build commands in package.json :

{
  ...
  scripts: {
    ...
    "prebuild:build": "ng g @lessify/angular-tools:i18n-merge",
    "i18n-check": "ng g @lessify/angular-tools:i18n-check",
    "i18n-merge": "ng g @lessify/angular-tools:i18n-merge",
  }
  ...
}

Future Innovations

The Angular Lessify Tools is Open Source and Free to use. Waiting for your feedback and improvements.

In case you like it, feel free to send a star and support our project Angular Lessify Tools on GitHub and Become a sponsor

Bonus

I'm also working on an application Localess that helps to store translations for your single-page applications in one place. The Localess is Open Source and Free to use and can be deployed and hosted on Firebase. In case you like it, give us a star to motivate us. Waiting for your feedback.