コンポーネントが2つのモジュールの宣言の一部であるため、角度テストが失敗する

Question

私は角度4でテストを作成しています。ユーザーによくフォーマットされたjsonを表示するためにPrettyJsonCompontを使用するコンポーネントがあります。

ngテストを実行すると、いくつかのコンポーネントテストが同じメッセージで失敗します。

失敗しました：PrettyJsonModuleとDynamicTestModule：タイプPrettyJsonComponentは2つの モジュールの宣言の一部です！ PrettyJsonComponentを PrettyJsonModuleとDynamicTestModuleをインポートする上位モジュールに移動することを検討してください。また、PrettyJsonComponentをエクスポートして含める新しい NgModuleを作成し、NgModuleをPrettyJsonModuleとDynamicTestModuleにインポートして をインポートすることもできます。

私のテストは次のようになります。

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が新しい角度モジュールを作成することです。そして、コンポーネントPrettyJsonComponentをその中に宣言します。しかし、このコンポーネントは、インポートしたPrettyJsonModuleに既に宣言されています。 1つのコンポーネントを2つのモジュールで宣言することはできません。

PrettyJsonComponentをconfigureTestingModule宣言から削除するだけで解決します。