typescript 未捕获的错误:模块“AppModule”导入了意外的指令“MyComboBox”,请添加@NgModule注解

wqsoz72f  于 2022-11-26  发布在  TypeScript
关注(0)|答案(3)|浏览(122)

我有一个自定义组件(MyComboBox),其中包含kendo-combobox
当我使用核心模块时,webpack编译成功结束,但chrome抛出以下错误:

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

下面是我的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]
})
ha5z0ras

ha5z0ras1#

编辑

当我们没有正确地计算Angular 时,这个错误经常出现。
确保我们只应该
1.导入modules并且导入componentsservices
1.声明components,而声明modulesservices
1.提供services不提供componentsmodules

原始答案:

你不必真的在你的App模块中导入MyComboBox。因为你已经在CoreModule中导出了它。所以我建议你从AppModule中的导入数组中删除MyComboBox。导入CoreModule会在AppModule中给予你MyComboBox组件。
app.module.ts

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

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

注意:您不能像在那里那样随意导入组件。它必须包含在要导入的模块中。

hgc7kmma

hgc7kmma2#

在我的例子中,我错误地在imports: []数组中列出了组件,请注意,它需要的是模块,而不是组件,这就是Angular抱怨找不到@NgModule定义的原因。
相反,我需要在declarations: []列表中列出组件。:)

vsnjm48y

vsnjm48y3#

如果你正在尝试创建自定义模块,需要这样做:

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

并在app.modules.ts中添加:

imports: [
          ....
          SharedModulesModule   
     ]

相关问题