Uncaught Error: Неожиданная директива "MyComboBox", импортированная модулем "AppModule". Добавьте примечание @NgModule

У меня есть пользовательский компонент (MyComboBox), внутри которого есть kendo-combobox комбинированный 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]
})

Ответы

Ответ 1

РЕДАКТИРОВАТЬ:

Эта ошибка часто возникает, когда мы неправильно importing, providing или declaring угловые modules, services, components.

Убедитесь, что мы должны только

  1. импортные modules а не components или services
  2. объявлять components а не modules или services.
  3. предоставлять services а не components или modules.

Оригинальный ответ:

Вам не нужно действительно импортировать 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]
})

Примечание: вы не можете импортировать компонент свободно, как вы делаете там. Он должен содержаться в модуле для импорта.

Ответ 2

В моем случае я ошибочно перечислял компонент в массиве imports: [], который, разумеется, ожидает модули, а не компоненты, и именно по этой причине Angular жаловался, что не смог найти @NgModule определение.

Вместо этого мне нужно было перечислить компонент в списке declarations: [].:)