Estoy creando un proyecto de micro frontends. Estoy enfrentando un problema en la inyección de tokens.

Tengo un proyecto de biblioteca que mfe1 consume y luego carga en la aplicación de shell.

Módulo de biblioteca

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

Desde mfe1,

en el modulo importaciones

 @NgModule({ declarations: [SetupComponent], imports: [ CommonModule, RouterModule.forChild([ { path: '', component: SetupComponent, } ]), EclatechCoreModule.forRoot(config) ], exports:[ SetupComponent ] }) export class SetupModule { }

Ahora, cuando cargo el mfe1 la configuración se carga correctamente y todo funciona, pero cuando cargo el mfe1 a través de la aplicación de shell , regresa con un error.

Error de aplicación de shell

 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!

Ambiente

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

AMBIENTE

 import { InjectionToken } from "@angular/core"; import { Environment } from "./environment.interface"; export const ENVIRONMENT : InjectionToken<Environment> = new InjectionToken<Environment>('ENVIRONMENT');