I am creating micro frontends project. I am facing an issue in token injection.

I've a library project which is consumed by mfe1 and then loaded in the shell app.

Library Module

@NgModule({
  declarations: [
    EclatechCoreComponent
  ],
  imports: [
  ],
  exports: [
    EclatechCoreComponent
  ]
})
export class EclatechCoreModule {
  
  public static forRoot(config: Environment): ModuleWithProviders<EclatechCoreModule> {
    return {
      ngModule: EclatechCoreModule,
      providers: [
        {
          provide: ENVIRONMENT,
          useValue: config
        }
      ]
    }
  }
}

From mfe1,

in the module imports

@NgModule({
  declarations: [SetupComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: SetupComponent,
      }
    ]),

    EclatechCoreModule.forRoot(config)
  ],
  
  exports:[
    SetupComponent
  ]
})
export class SetupModule { }

Now, When I load the mfe1 the config are loaded correctly and everything works but when I load the mfe1 through the shell app it returns with error.

Shell app error

core.js:6479 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SetupModule)[BusinessService -> BusinessService -> ConfigService -> ConfigService -> InjectionToken ENVIRONMENT -> InjectionToken ENVIRONMENT -> InjectionToken ENVIRONMENT]: 
  NullInjectorError: No provider for InjectionToken ENVIRONMENT!

Environment

export interface Environment {
    gatewayUrl: string;
    orgServiceUrl: string;
    client_id: string;
}

ENVIRONMENT

import { InjectionToken } from "@angular/core";
import { Environment } from "./environment.interface";


export const ENVIRONMENT : InjectionToken<Environment> = new InjectionToken<Environment>('ENVIRONMENT');