我已经开发了angular 5应用程序。我将应用程序划分为多个模块,例如ReportModule,ProjectModule等。我懒于加载这些功能模块。
{ path: 'bulkrmchange', loadChildren: './modules/empwise/empwise.module#EmpwiseModule' }
我的问题是,当我尝试将延迟加载的模块中的组件作为入口组件加载时,出现以下错误。
现在,我进行了大量研究,发现可以使用NgModuleFactoryLoader解决此问题。我已经尝试了以下代码。
ngAfterViewInit() {
const path = './modules/empwise/empwise.module#EmpwiseModule';
this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
const entryComponent = (<any>moduleFactory.moduleType).entry;
const moduleRef = moduleFactory.create(this.injector);
const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
this.cf.createComponent(compFactory);
});
}
但是出现以下错误。
请帮助我解决此问题。
这是employee.component中的代码,我试图在其中打开出现错误的模态组件。将此employee.component加载到我的惰性模块employee.module.ts中,并且尝试打开一个组件内部的模式组件EmployeeWiseAllocationModalComponent。
openContinueModal(gridOptions: any) {
this.isBackDateAllocation = false;
// Remove ag-cell focus
$('.ag-cell-focus').removeClass('ag-cell-focus');
//Configuration settings for modal popup
const initialState = {
gridOptions: gridOptions,
components: this.components,
allocationGridData: this.allocationGridData,
refreshAllocations: this.ongettingEmplID.bind(this),
minStartDate: this.minStartDate,
minEndDate: this.minEndDate
};
this.bsModalRef = this.modalService.show(EmployeeWiseAllocationModalComponent, Object.assign({ initialState }, this.config, { class: 'gray pmodal' })); // Here I am using modal service top open modal popup
this.bsModalRef.content.closeBtnName = 'Close'; // Modal Title
}
答案 0 :(得分:0)
是的,对于您的案例,入口组件在惰性模块中不起作用。当您看到组件工厂中的列表存储时,不要出现组件定义内部惰性模块的条目。但是我有一个解决方案,请使用自定义元素(ANGULAR ELEMENTS)渲染组件。
Angular元素自第6版开始可用,它使事情变得更加容易。 安装软件包@ angular / elements:
ng add @angular/elements
在懒惰模块的entryComponents中添加渲染所需的组件(不用担心,在这种情况下可以正常工作)
现在放在app.component.ts的构造函数中:
import {Component, OnInit, OnDestroy, Injector} from '@angular/core';
import {createCustomElement} from "@angular/elements";
constructor(private injector: Injector) {
// CUSTOM ELEMENTS
// Convert `InfoWindowComponent` to a custom element.
const customEle= createCustomElement(NameOfComponentToRender, {injector});
// Register the custom element with the browser.
customElements.define('name-example-element', customEle);
}
在此步骤中,自定义元素已在浏览器中注册,只有我们需要调用以呈现它:
const element = document.createElement('name-example-element') as NgElement & WithProperties<{}>;
document.body.appendChild(element );
然后使用自定义元素呈现组件。
用于销毁组件:
document.body.removeChild(element );
关于,希望对您有所帮助。