Issue with Transloco Translations Loading in Multirepo Angular Module Federation Setup

[ibartos]

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

• 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!

[giosueDelgado]

Hi, we have a similar issue on the micro frontend structure. Did you find a solution @ibartos ?

FYI @HeorhiN

[HeorhiN]

Basically, we find ourselves in a similar situation. We have a structure with an Nx monorepo where the management of multi-apps is done through module federation. Transloco is shared via an Nx library, and in the remote apps routes, we use provideTranslocoScope() with the loader definition exactly as mentioned in your issue. The problem we encounter is identical, and TranslocoService does not work as expected.

[shaharkazaz]

Can any of you share a basic reproduction repository?

[HeorhiN]

Hello, thank you for your response, in the example mentioned below in the remote-app , although Transloco works excellently in the template, I am unable to access the translation files of the remote-app through the Transloco Service.
https://github.com/HeorhiN/nx-trasloco-module-federation

[ibartos]

After the architecture change, unfortunately, the same problem still persists. Now I would like to import the translations with an inline loader into a simple Nx Angular non-buildable, non-publishable library.

In HTML, it works perfectly, but in TypeScript, it doesn't wait for the translations in time, thus throwing an error that they don't exist. If I try to access them a second later, then everything works perfectly.

As a result, it's not particularly related to Module Federation. The same issue occurs with simple Nx libraries as well.

"@jsverse/transloco": "^7.4.2"

[shaharkazaz]

@ibartos Have you read this section in the docs?

Sounds like what you are describing.