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 services
components
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.