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

但是当我点击垃圾桶（第一个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？

2 个答案: