:join

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


Command

ng generate @jsverse/transloco:join

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:join --default-lang en
ng g @jsverse/transloco:join --translation-path src/i18n --out-dir dist/i18n

Last updated

Was this helpful?