Failed: Unexpected directive 'ContactDetailsComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation

Question

I have created a new component and did ng test, but failing with the below error

Failed: Unexpected directive 'ContactDetailsComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

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

Remove `ContactDetailsComponent` from imports array and add it to `declarations` aray. — Amit Chigadani, Feb 19 '19 at 06:23
Possible duplicate of [Uncaught Error: Unexpected directive 'MyComboBox' imported by the module 'AppModule'. Please add a @NgModule annotation](https://stackoverflow.com/questions/43603515/uncaught-error-unexpected-directive-mycombobox-imported-by-the-module-appmod) — Amit Chigadani, Feb 19 '19 at 06:23

score 56 · Accepted Answer · answered Feb 19 '19 at 06:22

Remove ContactDetailsComponent component from the import array and add it in the declaration array. Components are always placed in a declaration array and modules are placed in import array.

Here is the solution:

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

You just cleared so many doubts with this one line _"Components are always placed in a declaration array and modules are placed in import array."_ — Tanzeel, Jan 01 '21 at 04:31

Failed: Unexpected directive 'ContactDetailsComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation

1 Answers1