Ленивая загрузка. Фабрика компонентов не найдена. Вы добавили его в @NgModule.entryComponents?

Question

Я создаю страницу с простым модальным окном, используя библиотеку ng2-bootstrap. Это выглядит как:

действия list.component.html

<a class="btn-setting"  (click)="dangerModal.show()"><i class="fa fa-trash"></i></a>

<div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button>
        <button type="button" class="btn btn-primary" (click)="delete()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Но когда я щелкнул значок корзины (первый раз), я получил ошибку:

ERROR Error: No component factory found for ModalBackdropComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.es5.js:3202)
    at CodegenComponentFactoryResolver.webpackJsonp.../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.es5.js:3267)
    at ComponentLoader.webpackJsonp.../../../../ng2-bootstrap/component-loader/component-loader.class.js.ComponentLoader.attach (component-loader.class.js:42)
    at ModalDirective.webpackJsonp.../../../../ng2-bootstrap/modal/modal.component.js.ModalDirective.showBackdrop (modal.component.js:195)
    at ModalDirective.webpackJsonp.../../../../ng2-bootstrap/modal/modal.component.js.ModalDirective.show (modal.component.js:102)
    at Object.eval [as handleEvent] (ActionListComponent.html:102)
    at handleEvent (core.es5.js:12047)
    at callWithDebugContext (core.es5.js:13506)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13094)
    at dispatchEvent (core.es5.js:8659)

Я нашел информацию, которая может отсутствовать в моем модуле для аннотации entryComponents для отображения компонента, поэтому я попытался добавить:

action.module.ts

@NgModule({
    //...
    imports: [
        //...
        ModalModule,
    ],
    entryComponents: [
        ModalBackdropComponent
    ]
})

Но у меня все еще та же ошибка.

Мой вопрос: может ли ошибка быть вызвана отложенной загрузкой моего модуля? Если так, как я могу обойти эту проблему? Если вы знаете ответ, позвольте мне, пожалуйста, объяснить, как работает entryComponents.

Answer 1

Хорошо. Я решил проблему. В моем случае, импорт ModalModule отсутствовал в основном модуле приложения. Решение выглядит так:

app.module.ts

@NgModule({
    imports: [
        //...
        ModalModule.forRoot()
    ],
    //...
})
export class AppModule { }

Надеюсь это кому-нибудь пригодится:)

Answer 2

В моем случае, забыв добавить NgbModule на мой ленивый загруженный модуль импорт вызвал такую ​​же ошибку. Итак, шаблон решения следующий:

@NgModule({
  imports: [
    ...
    NgbModule,
    ...
  ],
  declarations: [
    ...
    ModalDlgComponent,
    ...
  ],
  entryComponents: [
    ...
    ModalDlgComponent,
    ...
  ]
})
export class MyLazyLoadedModule {}