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

问题

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]
})

回答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

import modules and NOT the components or services
declare components and NOT the modules or services.
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.

回答2:

In my case, I was mistakenly listing the component in the imports: [] array, which, mind you, it expects modules, not components, and that is the reason Angular complained it couldn't find the @NgModule definition.

Instead, I needed to list the component in the declarations: [] list. :)

来源：https://stackoverflow.com/questions/43603515/uncaught-error-unexpected-directive-mycombobox-imported-by-the-module-appmod

标签

angular