未捕獲錯誤：由模塊「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] 
}) 

注意：您不能自由進口元件像你做什麼。它必須包含在要導入的模塊中。