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:
๐ฆ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:
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
:
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 using Nx here.
Last updated