角度測試失敗，因為Component是2個模塊聲明的一部分

Question

我在Angular 4中創建了一些測試。我有一個使用PrettyJsonCompont的組件，以便向用戶顯示格式良好的json。

當我運行測試時，我的幾個組件測試失敗並顯示相同的消息。

失敗：類型PrettyJsonComponent是2個模塊的聲明的一部分：PrettyJsonModule和DynamicTestModule！ 請考慮將PrettyJsonComponent移動到導入PrettyJsonModule和DynamicTestModule的更高模塊。 您還可以創建一個新的NgModule，它導出並包含PrettyJsonComponent，然后在PrettyJsonModule和DynamicTestModule中導入該NgModule。

這是我的測試的樣子。

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {ContentItemModalComponent} from './content-item-modal.component';
import {DialogService} from 'ng2-bootstrap-modal';
import {ContentItemService} from '../services/content-item.service';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FroalaEditorModule, FroalaViewModule} from 'angular-froala-wysiwyg';
import {HttpModule} from '@angular/http';
import {MainModel} from '../models/main-model';
import {PrettyJsonComponent, PrettyJsonModule} from 'angular2-prettyjson';

describe('ContentItemModalComponent', () => {
  let component: ContentItemModalComponent;
  let fixture: ComponentFixture<ContentItemModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        FormsModule,
        FroalaEditorModule.forRoot(),
        FroalaViewModule.forRoot(),
        HttpModule,
        PrettyJsonModule
      ],
      declarations: [ContentItemModalComponent, PrettyJsonComponent],
      providers: [
        DialogService,
        ContentItemService,
        MainModel
      ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContentItemModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

問題是configureTestingModule創建了一個新的Angular模塊。 並在其中聲明組件PrettyJsonComponent 。 但是這個組件已經在你導入的PrettyJsonModule中聲明了。 一個組件不能在兩個模塊中聲明，並且錯誤報告的內容。

要修復剛從configureTestingModule聲明中刪除PrettyJsonComponent 。