Skip to main content

Schematics

Ng-add​

Overview​

Creates boilerplate translation files for the given languages, and adds Transloco configuration for the project's root module.

Command​

  ng add @jsverse/transloco

Options​

Create the translation files along with the required configuration.​

  • --langs

    type: string

    default: en, es

Provide the translation files loader.​

  • --loader

    type: string

    default: Http

    options: Http, Webpack

    alias: lo

Define the translation files format.​

  • --translate-type

    type: string

    default: JSON

    options: JSON, Typescript

    alias: t

Provide the configuration that is needed for a project using server side rendering.​

  • --ssr

    type: boolean,

    default: false

Define the location of the translation files.​

  • --path

    type: string

    default: assets/i18n/

    alias: p

Provide the name of the project where Transloco should be installed to.​

  • --project

    type: string

Provide the path to a root Module and import TranslocoModule along with the module's required configuration defined by previous flags.​

  • --module

    type: string

    default: app

Scope​

Overview​

Add new Transloco scope to a new/existing Angular module, and create the scope's translation files.

Command​

ng generate @jsverse/transloco:scope [name]

Options​

Define the name of the new scope.

  • --name

type: string

Define the path at which module to add scope to, relative to the workspace root.

Note if this flag won't be provide a new Module should be created.

  • --module

type: string

Define the languages of the scope, default is the root languages.

  • --langs

type: string

alias: la

Skip the creation of the translation files.

  • --skip-creation

type: boolean

Define the format of the translation files.

  • --translate-type

type: string

default: JSON

Define the location of the translation files.

  • --translation-path

type: string

Examples​

ng g @jsverse/transloco:scope my-scope
ng g @jsverse/transloco:scope my-scope --module path/to/my-scope
ng g @jsverse/transloco:scope my-scope --inline-loader

Component​

Overview​

Creates boilerplate files for Angular component with a simple translation

Command​

ng generate @jsverse/transloco:component [name]

Options​

Define the component's name.​

  • --name

    type: string

Join​

Overview​

Merge all our translation files into one piece for each language.

Command​

ng generate @jsverse/transloco:join
info

If you have more then one entry folder for your translation files, you will have to add a mapping for each folder entry and the scope name. It could be done using scopePathMap property in your global config file.

By default the build script will go over the root translation file directory and will refer every sub directory as scope.

Let's say we have the following translations folder:

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

The script will run over all the directory files (minus the default language) and will merge the scope files to the main translation files.

Say our project's default language is English, if we run the script the expected output would be:

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 we have more then one entry folder for a scope we can specify a map between the scope name and the path to the translations using scopePathMap property in your global config file:

transloco.config.ts
const config: TranslocoGlobalConfig = {
  scopePathMap: {
    "my-scope": "src/app/path-to-scope",
    "my-project-scope": "projects/my-project/i18n"
  }
}
info

Once you specify the scopePathMap the script will automatically use it

Examples​

Merge translations files to a specific output directory:

ng g @jsverse/transloco:build --default-lang en

Options​

The folder that contains the root translation files.

  • --translation-path

    type: string

    default: src/assets/i18n

    alias: root

The output directory path

  • --out-dir

    type: string

    default: dist-i18n

    alias: o

The default language of the project

  • --default-lang

    type: string

    alias: o

Determine rather to join also the default language

  • --include-default-lang

    type: boolean

    default: false

Split​

Overview​

Does the opposite process of join command. It splits the translated files between the project's translation files.

Command​

ng generate @jsverse/transloco:split

Options​

The folder that contains the root translation files.

  • --translation-path

    type: string

    default: src/assets/i18n

    alias: root

The path of the source directory that contains the translated files.

  • source

    type: string

    default: dist-i18n

    alias: o

Upgrade​

Overview​

The Library's upgrade script from lower versions. For more information about the script see: v2-upgrade.md

Command​

 ng generate @jsverse/transloco:upgrade

Options​

Define the entry path of the upgrade script.​

  • --path

    type: string

    default: ./src/app

    alias: p