ng-add Schematic

Simplify the setup of Transloco in Angular projects with this schematic. It creates boilerplate translation files and configures Transloco for both module-based and standalone applications. Supports additional features like SSR and custom loaders.

---

Command

Angular CLI

ng add @jsverse/transloco

Nx 🐋

pnpm add @jsverse/transloco
nx g @jsverse/transloco:ng-add

Features

• Generates translation files for specified languages.

• Configures Transloco for both:

  • Module-based applications: Imports TranslocoRootModule in the root module

  • Standalone applications: Configures provideTransloco() in the app config

• Automatically detects Angular 18+ public/ vs legacy src/assets/ structure.

• Optional SSR support.

• Customizable translation loader and file paths.

---

Options

Option	Alias	Description	Type	Default
--langs	-	Specifies the languages for which translation files will be created.	string	en, es
--loader	--lo	Defines the loader used for fetching translation files.	string	Http
--ssr	-	Adds configurations required for projects using Server-Side Rendering (SSR) or prerendering.	boolean	false
--path	--p	Specifies a custom location for the generated translation files. When not provided, automatically detects the appropriate folder structure.	string	Auto-detected
--project	-	Specifies the project where Transloco should be installed.	string	Project root directory name
--module	-	Defines the root module where TranslocoModule and related configurations should be imported.	string	app

Usage Example

ng add @jsverse/transloco --langs en,fr --loader Webpack --path src/i18n/ --project my-angular-app --module app.module.ts