angular - 如何将 Ngx Progress 与 `HttpClient` 和 `HttpClientModule` 一起使用？

Question

我正在为一个组件使用 NgProgress，它工作正常，在运行单元测试时也是如此。

我确实使用 HttpClientModule 对 HttpModule 进行了升级，看起来不错。我的问题是，当我运行单元测试时出现以下错误:

[object ErrorEvent] 抛出

错误:StaticInjectorError[NgProgress]:
StaticInjectorError [NgProgress]:
NullInjectorError:没有 NgProgress 的提供者!

错误通常会自行解释，但我就是无法摆脱它并修复它。

是否有任何修复或解决方法？我是否错过了有关 NgProgress 的任何更新或升级？

app.component.ts:

...
import { HttpClient } from '@angular/common/http';
import { NgProgress } from '@ngx-progressbar/core';
...

constructor(..., public progress: NgProgress, ...) {...}

myFunction() {
    ...
    this.progress.complete();
    ....
}

app.component.spec.ts:

    import { RouterTestingModule } from "@angular/router/testing";
    import { HttpClientTestingModule } from '@angular/common/http/testing';
    import { HttpClient } from '@angular/common/http';
    import { NgProgress } from '@ngx-progressbar/core';
    ....
    describe("myComponent", () => {

    let component: myComponent;
    let fixture: ComponentFixture<myComponent>;

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                imports: [
                    ...
                    RouterTestingModule,
                    HttpClientTestingModule,
                    ReactiveFormsModule,
                    ...
                ],
                declarations: [myComponent],
                providers: [
                    { provide: MatDialogRef, useClass: MatDialogRefMock },
                    ...
                ],
                schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
            }).compileComponents();
        })
    );

});

Answer 1

问题已修复...解决方案是在 configureTestingModule({...}) 方法中的 Providers 数组中添加以下代码:

...
providers: [
    { provide: MatDialogRef, useClass: MatDialogRefMock },
    ...
    { provide: NgProgress }
],
....