Bug(scope): Error when trying to load MFE within host using module federation (unless giving the same setup in host)

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?

Current behavior

Angular 17 (standalone) Micro Frontend loads Transloco properly when loaded as a standalone application. When hosted using module federation, the host gives the following errors:

ERROR NullInjectorError: R3InjectorError(Standalone[LandingComponent])[StoreService -> StoreService -> StoreService -> TranslocoService -> InjectionToken TRANSLOCO_TRANSPILER -> InjectionToken TRANSLOCO_TRANSPILER]:
core.mjs:11806 ERROR Error: NG0200: Circular dependency in DI detected for .

Problem can be mitigated if I bootstrap the host app with Transloco as well. This creates coupling I don't think should exist as host shouldn't be aware of the MFE translation files location. I've tried also to solve this with scopes unsuccessfully.

This is my setup in app.config.ts in MFE (if I add this to host, the problem goes away, as mentioned) provideTransloco({ config: { defaultLang: 'en', reRenderOnLangChange: true, prodMode: !isDevMode(), availableLangs: LANGUAGE_MAP(), }, loader: TranslocoHttpLoader, }),

Expected behavior

I would expect setup of Transloco in micro frontend to be independent of its host.

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

Transloco Config

`
provideTransloco({
      config: {
        defaultLang: 'en',
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
        availableLangs: LANGUAGE_MAP(),
      },
      loader: TranslocoHttpLoader,
    }),
`

Please provide the environment you discovered this bug in

Transloco: 6.0.4
Angular: 17
Node: 20.9.0
Package Manager: npm 10.1.0
OS: Windows

Browser

Chrome

Additional context

No response

I would like to make a pull request for this bug

Our team is facing the same issue on a complex angular project after moving from 13.x to 17.x. 😔

Transloco: 6.0.4 Angular: 16.2.12 Node: 20.11.0 Package Manager: npm 10.2.4 OS: Windows

ERROR NullInjectorError: R3InjectorError(_AppModule)[_TranslocoService -> InjectionToken TRANSLOCO_TRANSPILER -> InjectionToken TRANSLOCO_TRANSPILER]: 
  NullInjectorError: No provider for InjectionToken TRANSLOCO_TRANSPILER!

We've ensured that all dependencies are properly installed and up-to-date. The error seems to be related to the injection of TRANSLOCO_TRANSPILER, but we're unsure why it's not being provided.

EDIT: I managed to resolve the issue by following the ngneat Transloco documentation closely (in my case i had to stick to the NgModule approach ).

I refactored the old TranslocoRootModule as follows:

typescript

provideTransloco({
  config: {
    availableLangs: ['fr', 'en'],
    defaultLang: 'en',
    reRenderOnLangChange: true,
    prodMode: environment.production,
  },
  loader: TranslocoHttpLoader,
})

I ensured that this configuration was imported only once in the app module as well.

Hope this helps!

jsverse / transloco