延迟加载.找不到组件工厂.您是否将其添加到@ NgModule.entryComponents? [英] Lazy loading. No component factory found. Did you add it to @NgModule.entryComponents?

问题描述

我使用ng2-bootstrap库创建带有简单模式窗口的页面.看起来像:

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

但是当我单击垃圾桶图标(第一个href)时，我收到了错误消息:

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)

我发现模块中缺少用于显示组件的entryComponents批注，因此我尝试添加:

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.

我的问题:该错误可能是由于延迟加载我的模块引起的吗?如果是这样，我该如何解决这个问题?如果您知道答案，请让我解释entryComponents如何工作.

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.

推荐答案

好.我解决了问题.就我而言，主应用程序模块中缺少导入ModalModule.解决方案如下:

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

这篇关于延迟加载.找不到组件工厂.您是否将其添加到@ NgModule.entryComponents?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！