Join Schematic

This schematic merges all your translation files into a single file for each language.

---

Command

Angular CLI

pnpm add @jsverse/transloco-schematics
ng generate @jsverse/transloco-schematics:join

Nx 🐋

If you have more than one entry folder for your translation files, you will need to add a mapping for each folder entry and the corresponding scope name using the scopePathMap property in your global config file.

By default, the build script will traverse the root translation file directory and treat every subdirectory as a scope.

For example, if your translation folder structure is:

├ 📂 src/assets/i18n/
   ├─ en.json
   ├─ fr.json
   ├─ es.json
   ├ 📂 todos/
      ├─ en.json
      ├─ fr.json
      ├─ es.json

The script will iterate all the files (excluding the default language) and merge the scope files into the main translation files.

Assuming the default language is English, running the script will produce the following outputs:

// dist-i18n/es.json
{
  "hello": "transloco es",
  "todos": {
    "todos-translation": "todos es"
  }
}

// dist-i18n/fr.json
{
  "hello": "transloco fr",
  "todos": {
    "todos-translation": "todos fr"
  }
}

If you have multiple entry folders for a scope, you can specify the map between the scope name and the translation path using scopePathMap in your global config file.

Example (transloco.config.ts)

const config: TranslocoGlobalConfig = {
  scopePathMap: {
    'my-scope': 'src/app/path-to-scope',
    'my-project-scope': 'projects/my-project/i18n',
  },
};

Once you specify the scopePathMap, the script will automatically use it.

---

Options

Option	Alias	Description	Type	Default
--translation-path	root	The folder that contains the root translation files.	string	src/assets/i18n
--out-dir	o	The output directory path where the merged translation files will be saved.	string	dist-i18n
--default-lang	-	The default language of the project.	string	-
--include-defaultLang	-	Determines whether to join the default language file as well.	boolean	false

---

Usage Example

ng g @jsverse/transloco-schematics:join --default-lang en
ng g @jsverse/transloco-schematics:join --translation-path src/i18n --out-dir dist/i18n