angular - Uncaught Error: Unexpected directive 'MyComboBox' imported by the module 'AppModule'. Please add a @NgModule annotation

Question

I've a custom component (MyComboBox) which has kendo-combobox inside.

When I use my core module, webpack compilation ends successfully but chrome throws the following error:

Uncaught Error: Unexpected directive 'MyComboBox' imported by the module 'AppModule'. Please add a @NgModule annotation.

Here is my AppModule:

import { MyComboBox } from '@my/core/control/MyComboBox';

@NgModule({
    declarations: [
        AppComponent,
        MyComboBox
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        DragulaModule,
        MyComboBox,
        CoreModule,
        ComboBoxModule
    ],
    entryComponents: [ MyComboBox ],
    providers: [HelperService],
    bootstrap: [AppComponent]
})

Answer 1

EDIT :

This error frequently comes up when we are not importing, providing, or declaring the angular modules, services, components properly.

Make sure that we should only

1. import modules and NOT the components or services
2. declare components and NOT the modules or services.
3. provide services and NOT components or modules.

Original Answer :

You don't have to really import MyComboBox in your App Module. Since you have already exported it in CoreModule. So I would suggest you to remove MyComboBox from your imports array in AppModule. Importing CoreModule will give you MyComboBox component within AppModule.

app.module.ts

@NgModule({
      declarations: [
      AppComponent,
      MyComboBox
     ],


    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DragulaModule,
    CoreModule
   ],
  // viewProviders: [ DragulaService ],
  providers: [HelperService],
  bootstrap: [AppComponent]
})

Note : You cannot import component freely like you are doing there. It has to be contained within the module to be imported.