Angular Unit testing : Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule': Add a @NgModule annotation

Question

Am implementing a simple unit test for my Component .

• i imported everything necessary : services , RouterModuleTesting ,FormsModule HttpModule ...

• Wanna note that I'm using DevExtreme Widgets.

but again , i confront some strange error :

the error says that i should add a @NgModule annotion somewhere , but it's not clear.

My test file is the following :

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CustomersListComponent } from './customers-list.component';
// DevExtreme Module
import {DxTemplateHost} from 'devextreme-angular';
// Router Testing Module
import {RouterTestingModule} from '@angular/router/testing';
// Services and HTTM Module
import { CustomerService } from './../customer.service';
import {HttpService} from '../../../shared/service/http.service';
import {SessionService} from '../../../shared/service/session.service';
import {HttpModule} from '@angular/http';
// Forms Module (ngModel)
import {FormsModule} from '@angular/forms';
// Schemas(datasource error)
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

describe('CustomerListComponent', () => {
  let component: CustomersListComponent;
  let fixture: ComponentFixture<CustomersListComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomersListComponent ],
      imports: [
        HttpModule,
        FormsModule,
        DxTemplateHost,
        RouterTestingModule,
      ],
      providers: [ CustomerService , SessionService , HttpService ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
  }));

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

  it('Customer-list component should be well defined', () => {
    expect(component).toBeDefined();
  });
});

When running Karma serve , the test falis and throws this :

Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
    Error: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
        at syntaxError (webpack:///~/@angular/compiler/@angular/compiler.es5.js:1690:21 <- src/test.ts:117724:34)
        at webpack:///~/@angular/compiler/@angular/compiler.es5.js:15383:0 <- src/test.ts:131417:44
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.Array.concat.CompileMetadataResolver.getNgModuleMetadata (webpack:///~/@angular/compiler/@angular/compiler.es5.js:15366:0 <- src/test.ts:131400:49)
        at JitCompiler.Array.concat.JitCompiler._loadModules (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26796:25 <- src/test.ts:142830:70)
        at JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26782:0 <- src/test.ts:142816:36)
        at JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26714:0 <- src/test.ts:142748:37)
        at TestingCompilerImpl.Array.concat.TestingCompilerImpl.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler/testing.es5.js:478:0 <- src/test.ts:232778:31)
        at TestBed.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:739:0 <- src/test.ts:40380:31)
        at Function.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:622:45 <- src/test.ts:40263:67)

Suggestions ??

Solution 1

i solved it by importing the whole module DevExtreme :

imports:[DevExtremeModule]

Solution 2

What went wrong for me was accidentally placing services inside the imports array when it should have been in the providers array.

After moving services to the providers array, it worked out fine :)