Question

我有一个自定义组件（MyComboBox）里面有kendo-combobox。

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

Uncaught Error: Unexpected directive 'MyComboBox' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:1682:34) [<root>]
    at eval (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:14149:44) [<root>]
    at Array.forEach (native) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:14132:49) [<root>]
    at JitCompiler._loadModules (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:25313:64) [<root>]
    at JitCompiler._compileModuleAndComponents (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:25272:52) [<root>]
    at JitCompiler.compileModuleAsync (eval at <anonymous> (http://localhost:8086/vendor.js:1354:1), <anonymous>:25234:21) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (eval at <anonymous> (http://localhost:8086/vendor.js:16:1), <anonymous>:4992:25) [<root>]
    at PlatformRef_.bootstrapModule (eval at <anonymous> (http://localhost:8086/vendor.js:16:1), <anonymous>:4978:21) [<root>]
    at eval (eval at <anonymous> (http://localhost:8086/app.js:4275:1), <anonymous>:10:53) [<root>]
    at Object.<anonymous> (http://localhost:8086/app.js:4275:1) [<root>]
    at __webpack_require__ (http://localhost:8086/polyfills.js:53:30) [<root>]
    at Object.<anonymous> (http://localhost:8086/app.js:8253:18) [<root>]
    at __webpack_require__ (http://localhost:8086/polyfills.js:53:30) [<root>]
ZoneAwareError @ zone.js?fad3:917
syntaxError @ VM3491:1682
(anonymous) @ VM3491:14149
CompileMetadataResolver.getNgModuleMetadata @ VM3491:14132
JitCompiler._loadModules @ VM3491:25313
JitCompiler._compileModuleAndComponents @ VM3491:25272
JitCompiler.compileModuleAsync @ VM3491:25234
PlatformRef_._bootstrapModuleWithZone @ core.es5.js?0445:4992
PlatformRef_.bootstrapModule @ core.es5.js?0445:4978
(anonymous) @ main.ts?5861:11
(anonymous) @ app.js:4275
__webpack_require__ @ polyfills.js:53
(anonymous) @ app.js:8253
__webpack_require__ @ polyfills.js:53
webpackJsonpCallback @ polyfills.js:24
(anonymous) @ app.js:1

这是我的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 ],
    // viewProviders: [ DragulaService ],
    providers: [HelperService],
    bootstrap: [AppComponent]
})

Answer 1

编辑：

如果我们不是importing，providing或declaring角度modules，services，components，我们会经常出现此错误

确保我们只应该

导入modules而不是components或services
声明components而不是modules或services。
提供services而非components或modules。

原始答案：

您不必在App Module中真正导入MyComboBox。由于您已将其导出到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抱怨它无法找到{的原因。 {1}}定义。

相反，我需要列出@NgModule列表中的组件。：）

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

2 个答案: