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

Question

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

当我用我的核心模块，编译的WebPack成功结束，但铬引发以下错误：

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

您不必在应用程序模块中真正导入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] 
}) 

注意：您不能自由进口元件像你做什么。它必须包含在要导入的模块中。