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

Question

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

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

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

当我使用我的组件时，我只需导入我的组件并在提供程序中提供我的令牌即可。例如，这就是我在故事书中所做的：

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

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

NullInjectorError：R3InjectorError（独立[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: {},
        },
    ])
);

谢谢

Answer 1

你已经将配置放入 beforeEach 中了吗？

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