问题
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">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</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.
回答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 :)
回答2:
In my case, forgetting to add the NgbModule
to my lazy loaded module imports caused the same error. So, the solution template is the following:
@NgModule({
imports: [
...
NgbModule,
...
],
declarations: [
...
ModalDlgComponent,
...
],
entryComponents: [
...
ModalDlgComponent,
...
]
})
export class MyLazyLoadedModule {}
来源:https://stackoverflow.com/questions/44783289/lazy-loading-no-component-factory-found-did-you-add-it-to-ngmodule-entrycompo