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]
})
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
modules and NOT the components or servicescomponents and NOT the modules or services.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.
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. :)