Angular 8 ngx-bootstrap modal 未找到组件工厂

Question

我有一个看起来像这样的模块：

@NgModule({
  imports: [
    EmployeeRoutingModule,
  ],
  declarations: [
    ListEmployeeComponent,
    EmployeeDialogComponent,
  ],
  providers: [
    EmployeeService,
    BsModalService,
  ],
  entryComponents: [
    EmployeeDialogComponent,
  ]
})
export class EmployeeModule {
}

然后像这样导入到app模块中

{
  path: 'employee',
  loadChildren: './employee/employee.module#EmployeeModule'
},

在 app.routing.ts.

内

当我尝试在我的 EmployeeModule 中使用 EmployeeDialogComponent 时，它不断发出错误

ERROR Error: No component factory found for EmployeeDialogComponent. Did you add it to @NgModule.entryComponents?

如果我将它添加到一个模块（让我们称之为 SharedModule），就像在应用运行时（在 app.module.ts 文件中）加载它一样。好像是偷懒用的东西。

问题是什么，我该如何解决？

这里是一个最小版本的模式不起作用的例子：

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {BsModalRef} from 'ngx-bootstrap';

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-body text-center">
      <p class="lead mb-5">{{ message }}</p>
      <button type="button" class="btn btn-lg btn-outline-secondary mr-5" (click)="decline()" >{{ btnNoText }}</button>
      <button type="button" class="btn btn-lg btn-success" (click)="confirm()" >{{ btnYesText }}</button>
    </div>
  `
})
export class ConfirmEmployeeModalComponent implements OnInit {
  @Output() result = new EventEmitter<boolean>();

  message = 'Are you sure?';
  btnNoText = 'No';
  btnYesText = 'Yes';

  constructor(public bsModalRef: BsModalRef) {
  }

  ngOnInit() {}

  confirm(): void {
    this.result.emit(true);
    this.bsModalRef.hide();
  }

  decline(): void {
    this.result.emit(false);
    this.bsModalRef.hide();
  }
}

我在模块 ListEmployeeComponent 中有一个组件，其中包含如下函数：

import {
  Component,
  NgZone,
  ElementRef,
  OnInit,
  ViewContainerRef,
  PipeTransform,
  Pipe,
  ViewChild
} from '@angular/core';
import {FormControl} from '@angular/forms';
import {DialogService, BuiltInOptions} from "ngx-bootstrap-modal";
//import { EmployeeDialogComponent } from '../employee-dialog/employee-dialog.component';
import {EmployeeService} from "../employee.service";
import {LocalStorageUtilityService, NotificationService} from "../../common/common.services";
import * as _ from 'lodash';
//import { NotifyDialogComponent } from '../../common/dialog/notify-dialog/notify-dialog.component';
import {UserService} from "../../common/user.service";
import {ConfirmModalComponent} from "../../common/confirm-modal/confirm-modal.component";
import {BsModalService} from "ngx-bootstrap/modal";
import {EmployeeDialogComponent} from "../employee-dialog/employee-dialog.component";
import {ConfirmEmployeeModalComponent} from "../confirm-employee-modal/confirm-modal.component";

@Component({
  templateUrl: 'list-employee.component.html',
  styleUrls: ['./list-employee.component.css']
})
export class ListEmployeeComponent {
  constructor(
    private modalService: BsModalService,
    public _dialogService: DialogService,
    public _companyService: EmployeeService,
    public _notificationService: NotificationService,
    private userService: UserService,
  ) {
  }

  showAddEmployeeDialog = () => {
    this.modalService.show(ConfirmEmployeeModalComponent, {}).content.result.subscribe((details: any) => {
      }
    );
  }
}

Answer 1

我成功地在 this repo 中重现了您的问题，并将 ModalModule.forRoot() 添加到 EmployeeModule 导入将修复错误。

我对 MatDialog 也有类似的问题，因此当我想在已经创建的 MatDialog 实例（可注入）中使用延迟加载模块中的组件时，我是得到同样的错误。然后我注意到当与 lazy-loaded 组件一起使用时，应该从头开始初始化该服务。你的情况也发生了类似的事情。

根据 docs ModalModule 是用 forRoot() 导入的 like;

// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

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

这意味着 BsModalService 的全局单例实例已创建并在整个应用程序中使用。而且它在初始化时对 lazy-loaded 组件一无所知。

因此，解决方案是为 lazy-loaded 模块初始化一个新实例，以便将 ModalModule.forRoot() 添加到 EmployeeModule 导入将修复错误。

@NgModule({
  imports: [
    EmployeeRoutingModule,
    ModalModule.forRoot()
  ],
  declarations: [
    EmployeeDialogComponent,
    ListEmployeeComponent,
  ],
  providers: [
    BsModalService,
  ],
  entryComponents: [
    EmployeeDialogComponent,
  ]
})
export class EmployeeModule {}

但是请注意，这将创建一个专用于 EmployeeModule 的 BsModalService 的新实例，并且它不会知道它之外的任何其他上下文以及任何外部上下文都不会'不要知道它。用更简单的术语来说，这意味着您无法在除 EmployeeModule 上下文之外的任何其他地方与此特定对话框进行交互（例如关闭它）。

Answer 2

就我而言，解决方案是在模块中添加以下内容：

import {  NgbModule } from '@ng-bootstrap/ng-bootstrap';
imports: [
    NgbModule
]

Angular 8 ngx-bootstrap modal 未找到组件工厂

Angular 8 ngx-bootstrap modal No component factory found

angular

ngx-bootstrap

angular8