エラー： 'DynamicTestModule'モジュールによって宣言された予期しない値 'FormGroup'

Question

プロジェクトの構造は次のとおりです。Angular2-webpack-starter。

プロジェクトが正常にコンパイル、ビルドされ、ブラウザに表示されます。ここに問題はありません。

しかし、karma and jasmineを使用してテストケースを実行しようとすると、このエラーが発生します。

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) 

私たちは、これらのすべてのモジュールを新しい角度慣習に従って必要に応じてapp.module.tsにインポートしました。

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() {} 
} 

当社のテストベッドは、このよう

でのセットアップとも

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule, 
    browser.platformBrowserDynamicTesting() 
); 

私たちは、すべてのパッケージの最新バージョンがインストールされています。

"@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" 

この問題を解決するための助けに感謝します。

Answer 1

エラーがあなたのテストベッド構成で

TestBed.configureTestingModule({ 
    imports: [ReactiveFormsModule, FormsModule], 
    declarations: [ FormGroup, XXXXComponent ], // declare the test component 
}); 

FormGroupであるが、それはReactiveFormsModuleに属し、あなたがそれを宣言するために、したがって、それは無効である、あなたのコードの一部ではありません。宣言されたもののNgModuleによって所有権を暗示します。提供したり、インポートしたり、エクスポートしたりしないでください。。間接的にをインポートしてをインポートし、ReactiveFormsModuleをインポートしてを間接的ににエクスポートして、ReactiveFormsModuleをエクスポートすることができます。それを宣言してはいけません。あなたはそれを提供してはいけません。

だからあなたの設定の呼び出しが宣言からFormGroup``

TestBed.configureTestingModule({ 
    imports: [ReactiveFormsModule, FormsModule], 
    declarations: [XXXXComponent], // declare the component under test 
});