jsverse
Bug(transloco): Lazy Loading Transloco Scopes Not Working in Component Logic
Is there an existing issue for this?
- [X] I have searched the existing issues
Which Transloco package(s) are the source of the bug?
Transloco
Is this a regression?
Yes
Current behavior
When using the TranslocoService to fetch translations in a lazy-loaded component, the translations are not resolved, and the following error occurs: Missing translation for 'adminPage.title'.
This happens even though the provideTranslocoScope function is correctly configured in the LAZY_ROUTES file with the scope admin-page. The translations are displayed properly in the template using the transloco structural directive, but the same keys are missing when accessed programmatically via TranslocoService.translate() in the component logic.
1.Define lazy routes as follows:
export const LAZY_ROUTES: Route = {
path: "lazy",
loadComponent: () =>
import("./lazy.component").then((LazyComponent) => LazyComponent),
providers: [provideTranslocoScope("admin-page")],
};
2.Create a lazy-loaded component (LazyComponent) with the following logic:
import { Component, inject } from "@angular/core";
import { TranslocoModule, TranslocoService } from "@jsverse/transloco";
@Component({
selector: "app-lazy",
templateUrl: "./lazy.component.html",
styleUrls: ["./lazy.component.scss"],
standalone: true,
imports: [TranslocoModule],
})
export default class LazyComponent {
private translocoService = inject(TranslocoService);
constructor() {
console.log(this.translocoService.translate("adminPage.title"));
}
}
3. html template:
<h4>Scope is set to admin-page in module's providers</h4>
<ng-container *transloco="let t">
<p data-cy="regular" class="admin-title">{{ t('adminPage.title') }}</p>
</ng-container>
Observed Behavior: The template correctly displays the translation for adminPage.title. In the console, the following error appears: Missing translation for 'adminPage.title'.
Expected behavior
The translation key adminPage.title should resolve successfully in the component logic when using TranslocoService.translate().
This issue was also observed in the official Transloco demo on CodeSandbox: Transloco Demo - Lazy Scope Issue
Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.
https://codesandbox.io/s/jsverse-transloco-kn52hs
Transloco Config
No response
Please provide the environment you discovered this bug in
Transloco: 7.5.1
Angular: 19
Node: 22.5.1
Package Manager: 10.9.1
OS: windows 11
Browser
No response
Additional context
No response
I would like to make a pull request for this bug
Yes 🚀
I have reviewed the documentation thoroughly, and I noticed that the issue I am encountering is also present in the main demo of the library.
I’ve added a comment highlighting the issue inside the lazy.component.ts file in the following CodeSandbox: CodeSandbox Link
Could you kindly review this and provide a recommended solution?
@shaharkazaz
I have added the following section to make it work for the first time:
export const lang: Record<string, Translation> = {
vi,
en
};
constructor(translocoService:TranslocoService) {
this.translocoService.setTranslation(
{ 'key': lang[this.translocoService.getActiveLang()]' },
this.translocoService.getActiveLang(),
);
}
The current method is inefficient as it requires repetition in each lazy-loaded module. Is this a known issue? Do you have any plans to address it? @shaharkazaz
I encountered a similar issue with loading translations for multiple modules in Transloco. I resolved it by using forkJoin to combine the translation requests.
Is there a plan to address this problem or provide an alternative solution?
@saeidi-dev is right, with lazy loading, even if translations are loaded before the initialization of the component, the service (method .translate) does not find the translations (at least, in the constructor block)
My bad, the issue is resolved for me
The issue was that the TranslocoService was provided in the lazy component
My bad, the issue is resolved for me
The issue was that the TranslocoService was provided in the lazy component
I have demonstrated this issue in the main Transloco demo. If you manage to implement this correctly using the provideTranslocoScope function without any problems, please share a CodeSandbox link.
I'll try to find some time to address this, if someone wants to take a shot at this you're welcome to open a PR 🙌
Because I had to take a detailed look on scoped translations, I came across this issue.
For me it seem that the issue @saeidi-dev tries to show in the CodeSandbox Link just proves what @shaharkazaz already mentioned in the FAQ. You have to be aware that scoped translations are not loaded when provided, the translations are loaded when used for the first time. In addition, loading scoped translations is an asynchronous task. Thus, the lazy loaded Component "LazyComponent" is rendered and the Life-Cycle hook ngOnInit already been called. Then in the template there is a scoped translation for the "admin-page", which triggers loading the "admin-page" translations. This means when the "translate" method in the Component is called, the "admin-page" translations are not available yet. As mentioned in the Docs you have to take care that translations have already been loaded before calling this method.
If you want to use the translations in the component you could take a look at the "translateSignal" method, which also automatically detects the current scope.
Any workarounds found yet?
The only thing that seems to work for me is literally brute force a setTimeout on the component
