带有令牌注入的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 时，配置正确加载并且一切正常，但是当我通过 shell 应用程序加载 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');

- Hary

---

你好，你解决了这个问题吗？我也遇到了同样的问题。 - HADEV

同样的问题在这里。试图将基本API URL传递给共享服务。 - Cornel Janssen

暂时还没有解决方案！ - Hary

我也遇到了同样的问题。 - Ihor Deyneka

Answer 1

尝试在ENVIRONMENT文件中设置注入令牌的默认值。 使用提供程序的config进行设置。

providers: [
{
          provide: ENVIRONMENT,
          useValue: config
        }
]

它会起作用。

这里有一个注入的例子： https://developer.okta.com/blog/2022/10/11/angular-dependency-injection

const export BREAD_TOKEN = new InjectionToken('bread', {
providedIn: 'root', factory: () => '' });

ENVIRONMENT 的代码示例：

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

let defaultEnv : Environment = {
  gatewayUrl: config.gatewayUrl;
  orgServiceUrl: config.orgServiceUrl;
  client_id: config.client_id;
};
export const ENVIRONMENT : InjectionToken<Environment> = new InjectionToken<Environment>('ENVIRONMENT'{
  providedIn: 'root',
  factory: () => defaultEnv
});

- Kandapang