Angular 5延迟加载模块中的条目组件不起作用

Question

我已经开发了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
    }

Answer 1

是的，入口组件在惰性模块中不起作用。当您看到组件工厂中的列表存储时，不要出现组件定义内部惰性模块的条目。但我有一个解决方案，请使用自定义元素（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 );

关于，希望对您有所帮助。