从哪里导入NgxMqttServiceConfig？ Angular测试中的NullInjectorError错误

问题描述

我正在使用Angular 8和ngx-mqtt开发一个应用程序。运行测试（在.spec.ts文件中定义的测试）时，出现此错误：

        NullInjectorError: StaticInjectorError(DynamicTestModule)[InjectionToken NgxMqttServiceConfig]: 
      StaticInjectorError(Platform: core)[InjectionToken NgxMqttServiceConfig]: 
        NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig!
    error properties: Object({ ngTempTokenPath: null,ngTokenPath: [ InjectionToken NgxMqttServiceConfig ],ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function,nodeFlags: 33800193,rootNodeFlags: 33554433,nodeMatchedQueries: 0,flags: 0,nodes: [ Object({ nodeIndex: 0,parent: null,renderParent: null,bindingIndex: 0,outputIndex: 0,checkIndex: 0,flags: 33554433,childFlags: 245760,directChildFlags: 245760,childMatchedQueries: 0,matchedQueries: Object({  }),matchedQueryIds: 0,references: Object({  }),ngContentIndex: null,childCount: 1,bindings: [  ],bindingFlags: 0,outputs: [  ],element: Object({ ns: '',name: 'app-movies',attrs: [  ],template: null,componentProvider: Object({ nodeIndex: 1,parent: <circular reference: Object>,renderParent: <circular reference: Object>,checkIndex: 1,flags: 245760,childFlags: 0,directChildFlags: 0,matchedQueries: Object,references: Object,ngC ...
        at <Jasmine>
        at NullInjector.get (http://localhost:9876/_karma_webpack_/vendor.js:40144:27)
        at resolveToken (http://localhost:9876/_karma_webpack_/vendor.js:55062:24)
        at tryResolveToken (http://localhost:9876/_karma_webpack_/vendor.js:54988:16)
        at StaticInjector.get (http://localhost:9876/_karma_webpack_/vendor.js:54838:20)
        at resolveToken (http://localhost:9876/_karma_webpack_/vendor.js:55062:24)
        at tryResolveToken (http://localhost:9876/_karma_webpack_/vendor.js:54988:16)
        at StaticInjector.get (http://localhost:9876/_karma_webpack_/vendor.js:54838:20)
        at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/vendor.js:66025:29)
        at NgModuleRef_.get (http://localhost:9876/_karma_webpack_/vendor.js:67091:16)
        at injectInjectorOnly (http://localhost:9876/_karma_webpack_/vendor.js:40023:33)
    Error: Expected undefined to be truthy.
        at <Jasmine>
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/main.js:1731:27)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.js:3833:26)
        at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.js:138795:39)

这是我当前的.spec.ts文件：

describe("MoviesComponent",() => {
    let component: MoviesComponent;
    let fixture: ComponentFixture<MoviesComponent>;

    FeveTestBed.prepare([MoviesComponent]);

    beforeEach(() => {
        fixture = TestBed.createComponent(MoviesComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it("should create",() => {
        expect(component).toBeTruthy();  // <------- FAILS HERE
    });
});

在.component.ts文件中，我使用了MqttService，该服务是从“ ngx-mqtt”导入的，并通过构造函数注入。组件工作良好，但测试却不行。我对.spec.ts文件没有多少经验，但是我想错误可能与测试文件中缺少某些导入或提供程序有关。我尝试将MqttServiceConfig添加到 MoviesComponent.spec.ts 中，如下所示：

beforeEach(() => {
    fixture = TestBed.configureTestingModule({ imports: [MqttServiceConfig] }).createComponent(MoviesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

即使如此（受this启发）：

it('should create',async(inject([MqttServiceConfig],(myService: MqttServiceConfig) => ...

我这样做是因为我不知道从何处导入NgxMqttServiceConfig 。我的意思是，它包含在MqttModule内部，但没有公开。也尝试使用MqttModule代替MqttServiceConfig，但没有结果。我想念什么？

解决方法

最后，只需将MqttModule 及其配置添加到AppComponent的TestBed中即可。我试图单独在{MoviesComponent中而不是AppComponent中添加MqttModule。

我的 app.module.ts ：

@NgModule({
    declarations: [
        AppComponent,MoviesComponent,...
    ],imports: [
        BrowserModule,HttpClientModule,MqttModule.forRoot(AppConstants.MQTT_SERVICE_OPTIONS),providers: [
        { provide: ErrorHandler,useClass: ErrorHandlerService },bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

我的 app.component.spec.ts ：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            HttpClientModule,...
        ],providers: [
            { provide: ErrorHandler,...
        ]
    }).compileComponents();
}));

AppConstants.MQTT_SERVICE_OPTIONS是配置为ngx-mqtt的普通对象。