角度单元测试:失败:模块“DynamicTestModule”导入的意外值“DxTemplateHost”:添加@NgModule 注释
Posted
技术标签:
【中文标题】角度单元测试:失败:模块“DynamicTestModule”导入的意外值“DxTemplateHost”:添加@NgModule 注释【英文标题】:Angular Unit testing : Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule': Add a @NgModule annotation 【发布时间】:2018-01-12 12:22:47 【问题描述】:我正在为我的组件实现一个简单的单元测试。
我导入了所有必要的东西:服务、RouterModuleTesting、FormsModule HttpModule ...
要注意我正在使用 DevExtreme 小部件。
但我又遇到了一些奇怪的错误:
错误说我应该在某处添加 @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 serve 时,测试失败并抛出这个:
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)
建议??
【问题讨论】:
您为什么要尝试将DxTemplateHost
包含到imports
数组中?它不是@NgModule
,而是普通类。我们只能导入由 @NgModule
装饰器装饰的类
@yurzui : 我做到了,因为我不允许我使用 DX 模板语法 -> 不能绑定到 'dxTemplateOf' 因为它不是 'div' 的已知属性,什么我应该这样做吗??
【参考方案1】:
我通过导入整个模块 DevExtreme 解决了这个问题:
imports:[DevExtremeModule]
【讨论】:
【参考方案2】:我的问题是不小心将服务放在了 imports
数组中,而它本应放在 providers
数组中。
将服务移至providers
数组后,效果很好:)
【讨论】:
以上是关于角度单元测试:失败:模块“DynamicTestModule”导入的意外值“DxTemplateHost”:添加@NgModule 注释的主要内容,如果未能解决你的问题,请参考以下文章
获取错误:在角度 js 中进行单元测试时出现 $injector:modulerr 模块错误
具有多个模块和多个主类的spring boot项目-单元测试失败