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

Posted 2023-03-13

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

【英文标题】：Failed: Unexpected directive 'ContactDetailsComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation

【发布时间】：2019-07-12 13:59:34

【问题描述】：

我创建了一个新组件并进行了 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();
  );
);

【问题讨论】：

从 imports 数组中移除 ContactDetailsComponent 并将其添加到 declarations aray。

Uncaught Error: Unexpected directive 'MyComboBox' imported by the module 'AppModule'. Please add a @NgModule annotation的可能重复

【参考方案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();
  );
);

【讨论】：

我的主，我无法发现那个错误问题。非常感谢！

你刚刚用这一行解开了很多疑惑“组件总是放在声明数组中，模块放在导入数组中。”