Error: Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'

Question

Our project structure follows this: Angular2-webpack-starter.

Our project successfully compiles, build and can be seen in the browser. No problems here.

But when we try to run the test cases using karma and jasmine we are getting 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 these modules in the app.module.ts as required by new angular convention.

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

Our testBed is setup in this way

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

  fixture = TestBed.createComponent(XXXXComponent);
  comp = fixture.componentInstance; 
});

and also

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

We have all the latest versions of 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 resolving this issue is appreciated.

Solution

The error is in your test bed configuration

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

FormGroup is not part of your code, it belongs to the ReactiveFormsModule and therefore it is invalid for you to declare it. Declaring connotes ownership by an NgModule of that which is declared. You also should not provide it, import it, or export it directly. You import it indirectly by way of importing ReactiveFormsModule, and may export it indirectly by way of exporting ReactiveFormsModule. You must not declare it. You must not provide it.

So change your configuration call to

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

Comments

[Ben Racicot]

Seriously glad I came across this... So you cannot import unnecessary things when testing... got it.

[Aluan Haddad]

@BenRacicot I'm glad this answer helped you. This applies regardless to whether or not you are testing. You actually can list any number of NgModules in imports and/or exports regardless of whether or not they are used. What you may not do is (1) declare components, directives, pipes and (2) provide services that belong to other NgModules. If this sounds complicated, it is. NgModule is a ridiculously complex and unnecessary abstraction that has no value (actually, it has negative value).

[yww325]

This answer saved my day! And I just want to say that the error message "Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'" is not helpful at all! If they can say something like "FormGroup is not declarable, must be imported in modules" or telling the relation between DynamicTestModule and NgModule. That message would be more helpful. But if I am just testing a component here, why my NgModule is involved? The test system is designed with underlying dependency?