In some cases, you may need to include translations within your npm libraries, especially in a monorepo environment. This allows you to keep translation files inside the library's folder and package them together. However, loading translation files directly from the library can be challenging for two main reasons:

1. The application’s public directory isn't directly accessible.

2. Webpack dynamic imports don’t work with libraries.

To overcome these issues, the only option is to load the translation files from the application's public folder. This means you would need to manually copy the translation files from the library to the application's translation folder, which can be repetitive and error-prone.

This is where theScoped Library Extractor tool comes in, which automates this process for you.

Example Setup

Let's consider a monorepo with the following structure:

📦 projects ┣ 📂 core ┃ ┣ 📂 src ┃ ┃ ┣ 📂 lib ┃ ┃ ┃ ┣ core.component.ts ┃ ┃ ┃ ┣ core.module.ts ┃ ┃ ┃ ┣ 📂 i18n ┃ ┃ ┃ ┃ ┣ en.json ┃ ┃ ┃ ┃ ┗ es.json ┃ ┃ ┣ public-api.ts ┣ ng-package.json ┣ package.json📦 src ┣ 📂 app ┃ ┣ app.component.html ┃ ┣ app.component.ts ┃ ┣ app.module.ts ┃ ┗ transloco.loader.ts ┣ 📂 assets ┃ ┣ 📂 i18n ┃ ┃ ┣ en.json ┃ ┃ ┗ es.json

Here, we have acore library with its own translation files located underprojects/core/src/lib/i18n. To use these translations in our application, we need to configure the library’s translations in theCoreModule.

import { provideTranslocoScope } from './transloco.providers';@NgModule({  declarations: [CoreComponent],  providers: [provideTranslocoScope('core')],  imports: [TranslocoModule],})export class CoreModule {}

<ng-container *transloco="let t">  {{ t('core.title') }}</ng-container>

pnpm add @jsverse/transloco-scoped-libs --save-dev

yarn add @jsverse/transloco-scoped-libs --dev

npm install @jsverse/transloco-scoped-libs --save-dev

{  "name": "@app/core",  "i18n": [    {      "scope": "core",      "path": "src/lib/i18n"    }  ]}

const config: TranslocoGlobalConfig = {    scopedLibs: ['./projects/core/', '@lib/name']};

const config: TranslocoGlobalConfig = {  scopedLibs: [    {      src: './projects/core',      dist: ['./projects/spa/src/assets/i18n', './src/assets/i18n/']    }  ]};

"scripts": {  "transloco:extract-scoped-libs": "transloco-scoped-libs --watch"}

pnpm transloco:extract-scoped-libs

Join Strategies

The tool supports two strategies for handling translations:

1. Default Strategy: The translation files from the library will be copied individually into the main project's translation folder.

2. Join Strategy: All translation files from the library will be combined into a single file (e.g.,en.vendor.json), which can then be loaded alongside the main translation files.

To use theJoin Strategy, modify thepackage.json of the library:

{  "name": "@app/core",  "i18n": [    {      "scope": "core",      "path": "src/lib/i18n",      "strategy": "join"    }  ]}

Then, in your application loader, you can use the following setup to load both the main and vendor translations:

// transloco-loader.ts@Injectable({ providedIn: 'root' })export class HttpLoader implements TranslocoLoader {  constructor(private http: HttpClient) {}  getTranslation(lang: string, { scope }) {    const base = this.http.get(`/assets/i18n/${lang}.json`);    if (scope) {      return base;    }    return forkJoin([      base,      this.http.get(`/assets/i18n/${lang}.vendor.json`),    ]).pipe(      map(([translation, vendor]) => {        return { ...translation, ...vendor };      }),    );  }}export const httpLoader = { provide: TRANSLOCO_LOADER, useClass: HttpLoader };

Use with Webpack

To add custom Webpack support, use a tool likengx-build-plus and include the plugin in yourwebpack.config.js:

const TranslocoScopedLibsWebpackPlugin = require('@jsverse/transloco-scoped-libs/webpack');module.exports = {  plugins: [new TranslocoScopedLibsWebpackPlugin()],};

This solution ensures that translation files from libraries are easily extracted, joined, and integrated into your application.

Last updated6 months ago