Clever Geek Handbook

Uncaught Error: Unexpected "MyComboBox" directive imported by "AppModule". Add @NgModule note

I have a custom component (MyComboBox) that has a kendo-combobox

combo box inside kendo-combobox

.

When I use my main module, compilation webpack

succeeds, 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]
})
+22


source to share


2 answers


EDIT :

This error often occurs when we are wrong importing

, providing

or declaring

the angle modules

, services

, components

.

Make sure we should only

  1. imported modules

    and not components

    orservices

  2. declare components

    and not modules

    or services

    .
  3. provide services

    and not components

    or modules

    .

Original answer:



You don't need to really import MyComboBox

into your app module. Since you've already exported it to CoreModule

. Therefore, I would suggest you remove MyComboBox

from the import array in AppModule

. Importing CoreModule

will give you a MyComboBox

component in AppModule

.

app.module.ts

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


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

Note: you cannot import the component freely as you do there. It must be contained in the module for import.

+81


source


In my case, I was mistakenly listing a component in an array imports: []

, which of course expects modules, not components, and it is for this reason that Angular complained that it could not find a @NgModule

definition.



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

. :)

+14


source






More articles:


All Articles