未捕获错误:模块'AppModule'导入的意外指令'MyComboBox'.请添加@NgModule注释

Question

我有一个自定义组件(MyComboBox)里面有kendo-combobox.

当我使用我的核心模块时,webpack编译成功结束,但chrome抛出以下错误:

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

这是我的AppModule:

app.module.ts

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

Answer 1

编辑:

此错误频繁出现的时候,我们都没有importing,providing或declaring角modules,services,components正确.

确保我们应该只

1. 进口modules而不是components或services
2. 声明components而不是modules或services.
3. 提供services而不是components或modules.

原答案:

您无需真正导入MyComboBoxApp Module.由于您已经将其导出CoreModule.所以我建议你MyComboBox从你的进口数组中删除AppModule.导入CoreModule将为您提供MyComboBox组件AppModule.

app.module.ts

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


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

注意:您无法像在那里那样自由地导入组件.它必须包含在要导入的模块中.

Answer 2

在我的情况下,我错误地列出了imports: []数组中的组件,请注意,它需要模块,而不是组件,这就是Angular抱怨它无法找到@NgModule定义的原因.

相反,我需要列出列表中的组件declarations: [].:)