Inline Loaders

When working on a feature module or a library (which is common in a monorepo environment), we may want to have the translation files inside the module folder and ship them together with it. To enable this feature, Transloco supports scope with inline loaders. We can pass the scope name and an inline loader that leverages Webpack import function to lazy load the local translation files.

Let's say we have the following Angular CLI project:

📦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.loader.ts
┣ 📂assets
┃ ┣ 📂i18n
┃ ┃ ┣ 📜en.json
┃ ┃ ┗ 📜es.json

Inside the feature module, we can define the TRANSLOCO_SCOPE provider and pass an inline loader:

feature.module.ts
export const loader = ['en', 'es'].reduce((acc, lang) => {
acc[lang] = () => import(`../i18n/${lang}.json`);
return acc;
}, {});
@NgModule({
imports: [TranslocoModule],
providers: [
{
provide: TRANSLOCO_SCOPE,
useValue: {
scope: 'scopeName',
loader
}
}
],
declarations: [YourComponent],
exports: [YourComponent]
})
export class FeatureModule {}
info

Note that when using an inline loader, the scope key is used as the alias.

Now we can translate our content using the scope we define:

my-comp.component.ts
@Component({
selector: 'your-comp',
template: `
<ng-container *transloco="let t">
<p>{{ t('scopeName.title') }}</p>
</ng-container>
`
})
export class YourComponent {}

And lazy-loaded both the feature module and its translation files in our application:

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

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.

You can find a complete working example that uses nx here.