Revolutionizing Translation Management: Lessify Tools for Efficient JSON File Merging
Tags: angular, i18n, firebase, opensource
Published: 2024-01-04 08:48:28

## 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](https://www.npmjs.com/package/@lessify/angular-tools) you can merge them in one at build time :

Install :
```sh
npm i -D @lessify/angular-tools
```

Configuration `lessify.json`:
```json
{
  "cwd": "./src/app",
  "output": "./src/assets/i18n",
  "languages": ["en", "de", "fr", "it"]
}
```
For more details, you can find the [official documentation](https://www.npmjs.com/package/@lessify/angular-tools)

Add to your build commands in `package.json` :
```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](https://www.npmjs.com/package/@lessify/angular-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](https://github.com/Lessify/lessify-angular) and [Become a sponsor](https://github.com/sponsors/Lessify)

## Bonus
I'm also working on an application [**Localess**](https://github.com/Lessify/localess) that helps to store translations for your single-page applications in one place. The [**Localess**](https://github.com/Lessify/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.

Thank you !!!!!