angular - 带有令牌注入的 Angular Webpack 模块化联合

Question

我正在创建微前端项目。我面临令牌注入问题。

我有一个库项目，由 mfe1 使用，然后加载到 shell 应用程序中。

库模块

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

从 mfe1，

在模块导入中

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

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

现在，当我加载mfe1配置时，配置已正确加载并且一切正常，但是当我mfe1通过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!

环境

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

环境

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


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

标签： angularwebpack-module-federation