Entry components in Angular 5 lazy loaded module not working

Question

I have developed an angular 5 application. I have divided my application into multiple modules like ReportModule, ProjectModule,etc. I am lazy loading these feature modules.

{ path: 'bulkrmchange', loadChildren: './modules/empwise/empwise.module#EmpwiseModule' }

My problem is when I am trying to load components in lazy loaded module as entry components, it is giving the following error.

Now I have researched a lot and found that we can use NgModuleFactoryLoader to resolve this issue. I have tried the below code.

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);
        });
    }

But I am getting the following error.

Please help me in resolving this issue.

This is the code in the employee.component where I am trying to open the my modal component which is giving the error.This employee.component is loaded in my lazy module employee.module.ts and I am trying to open a modal component EmployeeWiseAllocationModalComponent inside this component.

 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
    }

entry components are components that are loaded dynamically. It is different from lasy loaded modules and it shuldn't output an error. If it does, it means you have done something wrong in your code. Please post it, as well as a minimal reproducible example reproducing the issue if you can. — user4676340
Possible duplicate of EntryComponents in Module for LazyLoading — Josef Katič
Can you put your app module, routing module, EmpwiseModule and your EmpwiseRoutingModule (Minimal Codes for reproduce the issue) — Dulanjaya Tennekoon
@trichetriche what I am trying is that I am trying to open a modal popup containing an angular component inside a lazy loaded module. So I added that component in the entry component as we normally do in these types of scenarios but it is still giving me the error. — Ankit Makhija
You have an error because you have a bad design. If you use a multi-module component, it should be a third module, or in the caller module. — user4676340

Amn Amn · Accepted Answer · 2020-01-29T11:06:49

yes, the entry components dont working in lazy modules for your case. When you see the list storage in components factory, dont appear the entry components define inner Lazy Module. But I have a solution for you, use CUSTOM ELEMENTS (ANGULAR ELEMENTS) for render the components.

Angular elements is available since version 6 of angular and it make the things more easy. Install the package @angular/elements:

ng add @angular/elements

Add the component that you need for render in entryComponents of lazy module (don't worry, that working for this case)

Now inside the constructor of app.component.ts put:

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);
}

In this step the custom element is registered in browser and only we need to call for render it:

 const element = document.createElement('name-example-element') as NgElement & WithProperties<{}>;
 document.body.appendChild(element );

And the componenent is rendered using Custom Elements.

For destroy the component:

document.body.removeChild(element );

Regards, I wish that this help you.

Entry components in Angular 5 lazy loaded module not working

1 Answers