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

Question

我创建了一个新组件并进行了 ng 测试，但失败并出现以下错误

失败：意外的指令“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();
  });
});