Błąd: nieoczekiwana wartość "FormGroup" zadeklarowana przez moduł "DynamicTestModule"

Question

Nasza struktura projektu jest następująca: Angular2-webpack-starter.

Nasz projekt z powodzeniem kompiluje, buduje i może być widoczny w przeglądarce. Żadnych problemów tutaj.

Ale kiedy próbujemy uruchomić przypadki testowe używając karma and jasmine otrzymujemy ten błąd.

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) 

Zaimportowaliśmy wszystkie te moduły do ​​pliku app.module.ts zgodnie z wymaganiami nowej konwencji kątowej.

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

Nasza testowa jest ustawiony w ten sposób

a także

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

Mamy wszystkie najnowsze wersje pakietów zainstalowany.

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

Każda pomoc w rozwiązaniu tego problemu jest doceniana.

Answer 1

Błąd w konfiguracji badawczym

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

FormGroup nie jest częścią kodu, należy do ReactiveFormsModule i dlatego jest ona nieważna, aby go zgłosić. Deklarowanie własności konotowej przez NgModuł tego, co jest zadeklarowane. Nie należy go również dostarczać, importować ani eksportować bezpośrednio pod numer pod numerem. Zaimportować go pośrednio poprzez importowanie ReactiveFormsModule i może wyeksportować go pośrednio poprzez wywożenie ReactiveFormsModule. Nie możesz tego deklarować. Nie możesz tego podać.

Więc zmienić konfigurację połączenia do

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