失败：模块'DynamicTestModule'导入的意外指令'ContactDetailsComponent'。请添加@NgModule注释

Question

我已经创建了一个新组件并进行了测试，但没有出现以下错误

失败：模块'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();
  });
});

Answer 1

从导入数组中删除ContactDetailsComponent组件并将其添加到声明数组中。组件始终放在声明数组中，模块放在导入数组中。

这是解决方案：

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