Inline Loaders

When working on a feature module or a library (a common practice in a monorepo environment), it's often useful to include translation files inside the module folder and package them alongside the module. To facilitate this, Transloco supports scopes with inline loaders. This feature allows you to specify a scope name and provide an inline loader that uses ESBuild/Webpack's import function to lazily load the local translation files.

For example, consider the following Angular CLI project structure:

Standalone

📦projects ┗ 📂feature ┃ ┣ 📂src ┃ ┃ ┣ 📂lib ┃ ┃ ┃ ┣ 📂i18n ┃ ┃ ┃ ┃ ┣ en.json ┃ ┃ ┃ ┃ ┗ es.json ┃ ┃ ┃ ┣ feature.component.ts ┃ ┃ ┃ ┣ feature.routes.ts ┃ ┃ ┃ ┗ feature.service.ts ┃ ┃ ┣ public-api.ts 📦src ┣ 📂app ┃ ┣ app.routes.ts ┃ ┣ app.component.css ┃ ┣ app.component.html ┃ ┣ app.component.ts ┃ ┣ app.config.ts ┃ ┗ transloco.loader.ts ┣ 📂assets ┃ ┣ 📂i18n ┃ ┃ ┣ en.json ┃ ┃ ┗ es.json

Inside the feature route or component, we can define a scope provider and pass an inline loader that dynamically loads translation files:

feature.routes.ts

export const loader = ['en', 'es'].reduce((acc, lang) => {
  acc[lang] = () => import(`../i18n/${lang}.json`);
  return acc;
}, {});

export const FEATURE_ROUTES: Route = {
  path: 'feature',
  loadComponent: () =>
    import('./feature.component').then((FeatureComponent) => FeatureComponent),
  providers: [
    provideTranslocoScope({
      scope: 'myFeature',
      loader,
    }),
  ],
};

When using an inline loader, the scope's key serves as the alias for the translation scope.

Now, you can translate the content using the defined scope:

feature.component.ts

@Component({
  selector: 'app-feature',
  template: ` 
    <ng-container *transloco="let t">
      <p>{{ t('myFeature.title') }}</p>
    </ng-container>`,
  imports: [TranslocoDirective],
})
export default class FeatureComponent {}

Note that following the Angular DI rules, it can be done either in a feature module that we lazy-loaded or at the component providers level.

NgModule

📦projects ┗ 📂feature-module ┃ ┣ 📂src ┃ ┃ ┣ 📂lib ┃ ┃ ┃ ┣ 📂i18n ┃ ┃ ┃ ┃ ┣ en.json ┃ ┃ ┃ ┃ ┗ es.json ┃ ┃ ┃ ┣ feature-module.component.ts ┃ ┃ ┃ ┣ feature-module.module.ts ┃ ┃ ┃ ┗ feature-module.service.ts ┃ ┃ ┣ public-api.ts 📦src ┣ 📂app ┃ ┣ app-routing.module.ts ┃ ┣ app.component.css ┃ ┣ app.component.html ┃ ┣ app.component.ts ┃ ┣ app.module.ts ┃ ┣ transloco-root.module.ts ┃ ┗ transloco.loader.ts ┣ 📂assets ┃ ┣ 📂i18n ┃ ┃ ┣ en.json ┃ ┃ ┗ es.json

Inside the feature module, we can define a scope provider and pass an inline loader to handle the translation files:

feature.module.ts

export const loader = ['en', 'es'].reduce((acc, lang) => {
  acc[lang] = () => import(`../i18n/${lang}.json`);
  return acc;
}, {});

@NgModule({
  imports: [TranslocoModule],
  providers: [
    provideTranslocoScope({
      scope: 'scopeName',
      loader,
    }),
  ],
  declarations: [YourComponent],
  exports: [YourComponent],
})
export class FeatureModule {}

When using an inline loader, the scope's key serves as the alias for the translation scope.

Now, you can translate your content using the scope we defined:

feature.component.ts

@Component({
  selector: 'app-feature',
  template: `
    <ng-container *transloco="let t">
      <p>{{ t('scopeName.title') }}</p>
    </ng-container>
  `,
})
export class FeatureComponent {}

This setup will lazy-load both the feature module and its translation files in your application:

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    TranslocoRootModule,
    RouterModule.forRoot([
      {
        path: 'route-name',
        loadChildren: () =>
          import('path/to/feature/module').then((m) => m.FeatureModule),
      },
    ]),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Following Angular's Dependency Injection (DI) rules, this can be done either in the lazy-loaded feature module or at the component provider level.

You can find a complete working example using Nx here.