You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am implementing Transloco in a multirepo setup using Angular's Module Federation. I have successfully installed Transloco in the shell application and shared the package through the ModuleFederationPlugin's webpack configuration.
The translations work correctly when using TranslocoPipe in the HTML templates. However, when attempting to use translocoService.selectTranslate(), I encounter an error regarding missing translations. Sometimes the translations load correctly after the initial error, but inconsistently.
It seems that the translations are loading too late. I've attempted to preload the translations using an AppInitializer and tried creating guards to ensure the language files are loaded, but neither approach has resolved the issue.
Questions
Has anyone faced similar issues with Transloco in a Module Federation setup?
Are there recommended approaches or configurations to ensure translations are preloaded or loaded timely in such an architecture?
Any suggestions or guidance would be greatly appreciated. If it helps, I can provide a minimal code example to demonstrate the issue.
Thank you in advance to everyone who takes the time to look into this issue and share their expertise. I greatly appreciate any help or suggestions you can provide!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Environment:
Angular Version: 17
Transloco Version: 7.1.0
Architecture: Multirepo with Module Federation
I am implementing Transloco in a multirepo setup using Angular's Module Federation. I have successfully installed Transloco in the shell application and shared the package through the ModuleFederationPlugin's webpack configuration.
Shell App Configuration:
new ModuleFederationPlugin({ library: { type: "module" }, shared: { "@jsverse/transloco": { singleton: true }, }, });
Microfrontend Configuration:
In the microfrontend, I have imported the TranslocoModule and added a custom loader in the root module as follows:
`provideTranslocoScope({
scope: "test",
loader,
});
export const loader = ["en", "ro"].reduce((acc, lang) => {
acc[lang] = () => import(
../../../assets/i18n/${lang}.ts
);return acc;
}, {});`
Issue
The translations work correctly when using TranslocoPipe in the HTML templates. However, when attempting to use translocoService.selectTranslate(), I encounter an error regarding missing translations. Sometimes the translations load correctly after the initial error, but inconsistently.
It seems that the translations are loading too late. I've attempted to preload the translations using an AppInitializer and tried creating guards to ensure the language files are loaded, but neither approach has resolved the issue.
Questions
Thank you in advance to everyone who takes the time to look into this issue and share their expertise. I greatly appreciate any help or suggestions you can provide!
Beta Was this translation helpful? Give feedback.
All reactions