角度单元测试：失败：模块'DynamicTestModule'导入的意外值'DxTemplateHost'：添加@NgModule注释

Question

我正在为我的Component实现一个简单的单元测试。

• 我导入了所有必要的东西：服务，RouterModuleTesting，FormsModule HttpModule ......
• 想要注意我正在使用DevExtreme Widgets。

但同样，我面对一些奇怪的错误：

错误说我应该在某处添加@NgModule注释，但目前尚不清楚。

我的测试文件如下：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CustomersListComponent } from './customers-list.component';
// DevExtreme Module
import {DxTemplateHost} from 'devextreme-angular';
// Router Testing Module
import {RouterTestingModule} from '@angular/router/testing';
// Services and HTTM Module
import { CustomerService } from './../customer.service';
import {HttpService} from '../../../shared/service/http.service';
import {SessionService} from '../../../shared/service/session.service';
import {HttpModule} from '@angular/http';
// Forms Module (ngModel)
import {FormsModule} from '@angular/forms';
// Schemas(datasource error)
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

describe('CustomerListComponent', () => {
  let component: CustomersListComponent;
  let fixture: ComponentFixture<CustomersListComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomersListComponent ],
      imports: [
        HttpModule,
        FormsModule,
        DxTemplateHost,
        RouterTestingModule,
      ],
      providers: [ CustomerService , SessionService , HttpService ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
  }));

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

  it('Customer-list component should be well defined', () => {
    expect(component).toBeDefined();
  });
});

当运行Karma服务时，测试falis并抛出：

Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
    Error: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
        at syntaxError (webpack:///~/@angular/compiler/@angular/compiler.es5.js:1690:21 <- src/test.ts:117724:34)
        at webpack:///~/@angular/compiler/@angular/compiler.es5.js:15383:0 <- src/test.ts:131417:44
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.Array.concat.CompileMetadataResolver.getNgModuleMetadata (webpack:///~/@angular/compiler/@angular/compiler.es5.js:15366:0 <- src/test.ts:131400:49)
        at JitCompiler.Array.concat.JitCompiler._loadModules (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26796:25 <- src/test.ts:142830:70)
        at JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26782:0 <- src/test.ts:142816:36)
        at JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26714:0 <- src/test.ts:142748:37)
        at TestingCompilerImpl.Array.concat.TestingCompilerImpl.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler/testing.es5.js:478:0 <- src/test.ts:232778:31)
        at TestBed.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:739:0 <- src/test.ts:40380:31)
        at Function.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:622:45 <- src/test.ts:40263:67)

建议??

Answer 1

我通过导入整个模块DevExtreme来解决它：

imports:[DevExtremeModule]

Answer 2

我错误地将服务放在imports数组中，当它应该在providers数组中时。

将服务移动到providers阵列后，它很好:)