The structure of our project is as follows: Angular2-webpack-starter .
Our project is successfully compiled, assembled and can be seen in the browser. There is no problem.
But when we try to run tests using karma and jasmine we get this error.
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)
We have imported all of these modules into app.module.ts in accordance with the requirements of the new corner agreement.
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ ... ], imports: [ // import Angular modules ... BrowserModule, FormsModule, HttpModule, ReactiveFormsModule, ... ], providers: [ // expose our Services and Providers into Angular dependency injection ENV_PROVIDERS, APP_PROVIDERS ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class AppModule { constructor() {} }
Our testBed is configured this way.
TestBed.configureTestingModule({ imports: [ReactiveFormsModule, FormsModule], declarations: [ FormGroup, XXXXComponent ], // declare the test component }); fixture = TestBed.createComponent(XXXXComponent); comp = fixture.componentInstance; });
and
testing.TestBed.initTestEnvironment( browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting() );
We have all the latest packages installed.
"@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"
Any help in solving this problem is appreciated.