typescript - Angular 独立组件 - InjectionToken 没有提供者

我有一个使用注入令牌的独立组件。这个令牌帮助我设置路径（使用微前端时，路径并不是对所有组件都相同）。我没有在组件中提供这个令牌，因为我需要在 app-module.ts 中使用提供者来覆盖它。

所以我的组件有这个构造函数：

constructor(
    @Inject(ICON_SVG_PATH) public iconSvgPath: string,
    private readonly renderer: Renderer2
  ) {}

当我使用我的组件时，我只需导入我的组件并在提供者中提供我的令牌。例如，这就是我在 Storybook 中的做法：

imports: [IconComponent],
providers: [
   {
       provide: ICON_SVG_PATH,
       useValue: '/assets/icons',
   },
],

我的问题是，当我尝试在我的 spec.ts 文件中为这个组件编写测试时，会出现这个错误：

NullInjectorError：R3InjectorError(Standalone[IconComponent])[InjectionToken ICON_SVG_PATH -> InjectionToken ICON_SVG_PATH -> InjectionToken ICON_SVG_PATH]：NullInjectorError：没有 InjectionToken ICON_SVG_PATH 的提供者！错误属性：Object({ ngTempTokenPath: null, ngTokenPath: ['InjectionToken ICON_SVG_PATH', 'InjectionToken ICON_SVG_PATH', 'InjectionToken ICON_SVG_PATH'] })

首先，我尝试像使用它时一样提供我的令牌：

await TestBed.configureTestingModule({
      imports: [IconComponent],
      providers: [
        {
          provide: ICON_SVG_PATH,
          useValue: '/assets/icons',
        },
      ],
    })
      .overrideComponent(IconComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default },
      })
      .compileComponents();

但是我有相同的错误。

我也试着那样提供它：

TestBed.overrideProvider(MY_INJECTION_TOKEN, { useValue: {} });

但是我得到的结果是一样的。

最后，我尝试从 test.ts 文件提供它，但没有任何其他反应。

getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting([
        {
            provide: MY_INJECTION_TOKEN,
            useValue: {},
        },
    ])
);

谢谢

答案＃1

你已经把你的配置放在 beforeEach 里面了吗？

beforeEach(waitForAsync(() => {
   TestBed.configureTestingModule({
      imports: [IconComponent],
      providers: [
        {
          provide: ICON_SVG_PATH,
          useValue: '/assets/icons',
        },
      ],
    })
      .overrideComponent(IconComponent, {
        set: { changeDetection: ChangeDetectionStrategy.Default },
      })
      .compileComponents();
  }));