Lazy loading. No component factory found. Did you add it to @NgModule.entryComponents?

Question

I create page with simple modal window using ng2-bootstrap library. It looks like:

action-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 -->

But when I clicked trash icon (first href) I got error:

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)

I found info that may by missing entryComponents annotation in my module for showing component, so I tried add:

action.module.ts

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

But i still have the same error.

My question: Can the error be caused by lazy loading my module? If so, how can I get around this issue? If you know answer, let me explain how does entryComponents work, please.

Answer 1

Ok. I solved the problem. In my case, import ModalModule was missing in main app module. The solution looks like this:

app.module.ts

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

I hope this will be helpful to someone :)