延迟加载。未找到组件工厂。你把它添加到@NgModule.entryComponents了吗？

Question

我使用 ng2-bootstrap 库创建具有简单模态 window 的页面。看起来像：

动作-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 -->

但是当我点击垃圾桶图标时 (first href) 我得到了错误：

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 {}

延迟加载。未找到组件工厂。你把它添加到@NgModule.entryComponents了吗？

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

ng2-bootstrap

angular