web-dev-qa-db-ja.com

失敗：モジュール「DynamicTestModule」によってインポートされた予期しないディレクティブ「ContactDetailsComponent」。 @NgModuleアノテーションを追加してください

新しいコンポーネントを作成してngテストを行いましたが、以下のエラーで失敗しました

失敗：モジュール「DynamicTestModule」によってインポートされた予期しないディレクティブ「ContactDetailsComponent」。 @NgModuleアノテーションを追加してください。

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

import { AdditionalContactDetailsComponent } from './additional-contact-details.component';
import { EdlInputModule, EdlIconModule, EdlMessagesModule } from '@fedex/ddt';
import { ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
import { ContactDetailsComponent } from '../contact-details/contact-details.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

fdescribe('AdditionalContactDetailsComponent', () => {
  let component: AdditionalContactDetailsComponent;
  let fixture: ComponentFixture<AdditionalContactDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [EdlInputModule,
        ReactiveFormsModule,
        FormsModule,
        EdlIconModule,
        EdlMessagesModule,
        ContactDetailsComponent,
        HttpClientModule,
        HttpClientTestingModule],
      declarations: [AdditionalContactDetailsComponent],
      providers: [FormBuilder]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
angulartypescriptkarma-jasmine
10
Ramana

インポート配列からContactDetailsComponentコンポーネントを削除し、宣言配列に追加します。 Componentsは常に宣言配列に配置され、modulesはインポート配列に配置されます。

これが解決策です：

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

import { AdditionalContactDetailsComponent } from './additional-contact-details.component';
import { EdlInputModule, EdlIconModule, EdlMessagesModule } from '@fedex/ddt';
import { ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
import { ContactDetailsComponent } from '../contact-details/contact-details.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

fdescribe('AdditionalContactDetailsComponent', () => {
  let component: AdditionalContactDetailsComponent;
  let fixture: ComponentFixture<AdditionalContactDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [EdlInputModule,
        ReactiveFormsModule,
        FormsModule,
        EdlIconModule,
        EdlMessagesModule,
        HttpClientModule,
        HttpClientTestingModule],
      declarations: [AdditionalContactDetailsComponent, ContactDetailsComponent],
      providers: [FormBuilder]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
15
TheParam