Ошибка: Неожиданное значение «FormGroup», объявленное модулем «DynamicTestModule».

Структура нашего проекта следующая: 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, как того требует новое соглашение angular.

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

Наш тестовый стенд настроен таким образом

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

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

а также

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"

Любая помощь в решении этой проблемы приветствуется.


person Abhijith Nagaraja    schedule 25.01.2017    source источник
comment
удалите FormGroup из объявлений и добавьте к провайдерам, если вы его внедрили. Я тоже не вижу, чтобы вы импортировали FormGroup.   -  person raj    schedule 25.01.2017
comment
набери очки и сделай это ответом   -  person FlavorScape    schedule 09.02.2017


Ответы (1)


Ошибка в конфигурации вашего испытательного стенда

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

FormGroup не является частью вашего кода, он принадлежит ReactiveFormsModule, и поэтому вы не можете его объявить. Объявление подразумевает владение NgModule тем, что объявлено. Вы также не должны предоставлять его, импортировать или экспортировать напрямую. Вы импортируете его косвенно путем импорта ReactiveFormsModule и можете экспортировать его косвенно путем экспорта ReactiveFormsModule. Вы не должны заявлять об этом. Вы не должны предоставлять его.

Поэтому измените свой вызов конфигурации на

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [XXXXComponent], // declare the test component
});
person Aluan Haddad    schedule 12.02.2017
comment
Серьезно рад, что наткнулся на это ... Так что вы не можете импортировать ненужные вещи при тестировании ... понял. - person Ben Racicot; 14.04.2017
comment
@BenRacicot Я рад, что этот ответ помог вам. Это применимо независимо от того, тестируете вы или нет. На самом деле вы можете перечислить любое количество NgModule в imports и/или exports независимо от того, используются они или нет. Чего вы не можете не делать, так это (1) объявлять компоненты, директивы, каналы и (2) предоставлять сервисы, принадлежащие другим NgModule. Если это звучит сложно, это так. NgModule — смехотворно сложная и ненужная абстракция, не имеющая ценности (на самом деле, она имеет отрицательное значение). - person Aluan Haddad; 15.04.2017
comment
Этот ответ спас мой день! И я просто хочу сказать, что сообщение об ошибке «Неожиданное значение FormGroup», объявленное модулем «DynamicTestModule», совершенно бесполезно! Если они могут сказать, что что-то вроде FormGroup не подлежит объявлению, его необходимо импортировать в модули или указать связь между DynamicTestModule и NgModule. Это сообщение было бы более полезным. Но если я просто тестирую компонент здесь, почему задействован мой NgModule? Тестовая система разработана с учетом базовой зависимости? - person yww325; 31.03.2020