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.

remove ``FormGroup`` from declarations and add to providers if you have injected it. I dont see you importing ``FormGroup`` either. — raj, Jan 25 '17 at 01:16

Aluan Haddad · Accepted Answer · 2019-06-12T12:58:47.127

38

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
});

edited Jun 12 '19 at 12:58

answered Feb 12 '17 at 09:28

Aluan Haddad

29,886
8
72
84

Seriously glad I came across this... So you cannot import unnecessary things when testing... got it. – Ben Racicot Apr 14 '17 at 14:46
2

@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 `NgModule`s 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 `NgModule`s. If this sounds complicated, it is. `NgModule` is a ridiculously complex and unnecessary abstraction that has no value (actually, it has negative value). – Aluan Haddad Apr 15 '17 at 05:58
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? – yww325 Mar 31 '20 at 04:51

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

1 Answers1