我有一个看起来像这样的模块:
@NgModule({
imports: [
EmployeeRoutingModule,
],
declarations: [
ListEmployeeComponent,
EmployeeDialogComponent,
],
providers: [
EmployeeService,
BsModalService,
],
entryComponents: [
EmployeeDialogComponent,
]
})
export class EmployeeModule {
}
它像这样导入到应用程序模块中
{
path: 'employee',
loadChildren: './employee/employee.module#EmployeeModule'
},
在app.routing.ts
内。
当我尝试在EmployeeDialogComponent
中使用EmployeeModule
时,它会不断发出错误消息
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) => {
}
);
}
}
答案 0 :(得分:3)
我设法在this repo中重现了您的问题,并在ModalModule.forRoot()
导入中添加了EmployeeModule
将解决该错误。
我对MatDialog
有类似的问题,因此当我想在已经创建的MatDialog
实例(可注射)中使用延迟加载的模块中的组件时,同样的错误。然后,我注意到与延迟加载的组件一起使用时,应该从头开始初始化服务。您的情况也正在发生类似的情况。
根据docs ModalModule
与forRoot()
一样被导入;
// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
表示BsModalService
的全局单例实例已创建并在整个应用程序中使用。而且它在初始化时对延迟加载的组件一无所知。
因此,解决方案是为延迟加载的模块初始化一个新实例,以便在ModalModule.forRoot()
导入中添加EmployeeModule
可以解决该错误。
@NgModule({
imports: [
EmployeeRoutingModule,
ModalModule.forRoot()
],
declarations: [
EmployeeDialogComponent,
ListEmployeeComponent,
],
providers: [
BsModalService,
],
entryComponents: [
EmployeeDialogComponent,
]
})
export class EmployeeModule {}
但是请注意,这将创建专用于BsModalService
的{{1}}的新实例,并且不会知道其外部的任何其他上下文,也不会知道任何外部的上下文意识到这一点。简单来说,这意味着您无法与EmployeeModule
上下文以外的其他任何位置(例如关闭对话框)进行交互。
答案 1 :(得分:1)
就我而言,解决方案是在模块中添加以下内容:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
imports: [
NgbModule
]