59

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]
})
5
  • You should be importing Core Module instead of MyComboBox. Can you show how you have exported and declared MyComboBox? Apr 25, 2017 at 6:54
  • import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
    – Hamit
    Apr 25, 2017 at 8:27
  • My question was where did you export MyComboBox? I mean in which module? Can you please show that. Apr 25, 2017 at 8:30
  • import { ComboBoxModule } from '@progress/kendo-angular-dropdowns'; import { ... MyComboBox, ... } ... @NgModule({ imports: [ ... ComboBoxModule, ... ], ... exports: [ ... MyComboBox, ... ], declarations: [ ... MyComboBox, ... ],
    – Hamit
    Apr 25, 2017 at 8:34
  • It is my core module.
    – Hamit
    Apr 25, 2017 at 8:35

3 Answers 3

209

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.

9
  • Thank you for your solution. The error changed now: Uncaught Error: Unexpected value 'GridModule' imported by the module 'CoreModule'. Please add a @NgModule annotation.
    – Hamit
    Apr 25, 2017 at 8:53
  • This is because I use kendo's GridModule in my custom MyDataGrid
    – Hamit
    Apr 25, 2017 at 8:53
  • My core module again: import { GridModule } from '@progress/kendo-angular-grid'; ... @NgModule({ imports: [ ... GridModule, ButtonsModule, ComboBoxModule, InputsModule, DropDownsModule, UploadModule, LayoutModule, DialogModule ], ....
    – Hamit
    Apr 25, 2017 at 8:55
  • There seems to be some problem with kendo package then. Make sure you have the right version of kendo and angular-cli that is required to run. Apr 25, 2017 at 9:03
  • 1
    @Greg Components are nothing but the Directives with a view. So Directives should also be declared. Aug 7, 2019 at 14:54
26

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. :)

0
0

If you're trying creating custom module, need to do this:

    @NgModule({
      declarations: [QuantityRaritiesComponent],
      imports: [
        CommonModule,
      ],
      exports: [
        QuantityRaritiesComponent
      ],
      entryComponents: [QuantityRaritiesComponent]
    })
    
    export class SharedModulesModule { }

And in app.modules.ts add:

     imports: [
          ....
          SharedModulesModule   
     ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.