javascript - Lỗi: Giá trị không mong đợi 'FormGroup' được khai báo bởi module 'DynamicTestModule'
Cấu trúc dự án của chúng tôi theo như sau: Angular2-webpack-starter.
Dự án của chúng tôi biên dịch và xây dựng thành công, và có thể xem được trên trình duyệt. Không có vấn đề gì ở đây.
Nhưng khi chúng tôi thử chạy các trường hợp kiểm thử bằng karma và jasmine thì chúng tôi gặp lỗi này.
XXXXComponent
:heavy_multiplication_x: Should Match Current Tab as 1
Chrome 55.0.2883 (Mac OS X 10.10.5)
Error: Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'
at SyntaxError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:811:0 <- config/spec-bundle.js:74048:33)
at SyntaxError.BaseError [as constructor] (webpack:///~/@angular/compiler/src/facade/errors.js:26:0 <- config/spec-bundle.js:78913:16)
at new SyntaxError (webpack:///~/@angular/compiler/src/util.js:151:0 <- config/spec-bundle.js:6408:16)
at webpack:///~/@angular/compiler/src/metadata_resolver.js:475:0 <- config/spec-bundle.js:19829:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (webpack:///~/@angular/compiler/src/metadata_resolver.js:457:0 <- config/spec-bundle.js:19811:54)
at JitCompiler._loadModules (webpack:///~/@angular/compiler/src/jit/compiler.js:165:25 <- config/spec-bundle.js:55462:64)
at JitCompiler._compileModuleAndAllComponents (webpack:///~/@angular/compiler/src/jit/compiler.js:144:25 <- config/spec-bundle.js:55441:52)
at JitCompiler.compileModuleAndAllComponentsSync (webpack:///~/@angular/compiler/src/jit/compiler.js:98:0 <- config/spec-bundle.js:55395:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:///~/@angular/compiler/bundles/compiler-testing.umd.js:482:0 <- config/spec-bundle.js:78583:35)
at TestBed._initIfNeeded (webpack:///~/@angular/core/bundles/core-testing.umd.js:761:0 <- config/spec-bundle.js:26731:40)
at TestBed.createComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:844:0 <- config/spec-bundle.js:26814:18)
at Function.TestBed.createComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:673:0 <- config/spec-bundle.js:26643:33)
at Object.<anonymous> (webpack:///src/app/zzzz/yyyy/xxxx.component.spec.ts:20:0 <- config/spec-bundle.js:93231:37)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:242:0 <- config/spec-bundle.js:73479:26)
at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- config/spec-bundle.js:73133:39)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:241:0 <- config/spec-bundle.js:73478:32)
at Zone.run (webpack:///~/zone.js/dist/zone.js:113:0 <- config/spec-bundle.js:73350:43)
at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:102:0 <- config/spec-bundle.js:72848:34)
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:72878:42)
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:72878:42)
at webpack:///~/zone.js/dist/jasmine-patch.js:129:91 <- config/spec-bundle.js:72875:130
at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:275:0 <- config/spec-bundle.js:73512:35)
at Zone.runTask (webpack:///~/zone.js/dist/zone.js:151:0 <- config/spec-bundle.js:73388:47)
at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:433:0 <- config/spec-bundle.js:73670:35)
Chúng tôi đã nhập tất cả các module này trong app.module.ts như yêu cầu theo quy ước mới của Angular.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
...
],
imports: [ // import Angular's modules
...
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
... ],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {
constructor() {}
}
Bệ thử của chúng tôi được thiết lập theo cách này
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [ FormGroup, XXXXComponent ], // declare the test component
});
fixture = TestBed.createComponent(XXXXComponent);
comp = fixture.componentInstance;
});
và cũng
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting()
);
Chúng tôi đã cài đặt tất cả các phiên bản mới nhất của các gói.
"@angular/common": "~2.4.3",
"@angular/compiler": "~2.4.3",
"@angular/core": "~2.4.3",
"@angular/forms": "~2.4.3",
"@angular/http": "~2.4.3",
"@angular/material": "2.0.0-beta.1",
"@angular/platform-browser": "~2.4.3",
"@angular/platform-browser-dynamic": "~2.4.3",
"@angular/platform-server": "~2.4.3",
"@angular/router": "~3.4.3",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.1",
"webpack": "2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "2.2.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-md5-hash": "~0.0.5",
"webpack-merge": "~2.4.0"
Mọi sự giúp đỡ trong việc giải quyết vấn đề này đều được trân trọng.
Câu trả lời #1
Lỗi nằm trong cấu hình bệ thử của bạn
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [ FormGroup, XXXXComponent ], // declare the test component
});
FormGroup không phải là một phần trong mã của bạn, nó thuộc về ReactiveFormsModule và do đó việc bạn khai báo nó là không hợp lệ. Việc khai báo đồng nghĩa với việc NgModule sở hữu những gì được khai báo. Bạn cũng không nên cung cấp, nhập khẩu hoặc xuất khẩu nó trực tiếp. Bạn nhập khẩu nó gián tiếp thông qua việc nhập khẩu ReactiveFormsModule, và có thể xuất khẩu nó gián tiếp thông qua việc xuất khẩu ReactiveFormsModule. Bạn không được khai báo nó. Bạn không được cung cấp nó.
Vì vậy hãy thay đổi cuộc gọi cấu hình của bạn thành
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [XXXXComponent], // declare the test component
});