Компоненты входа в модуле ленивой загрузки Angular 5 не работают

Я разработал приложение 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
    }

angular lazy-loading ng-modules
person Ankit Makhija    schedule 18.03.2019    source источник
comment
Входные компоненты - это компоненты, которые загружаются динамически. Он отличается от быстро загружаемых модулей и не должен выдавать ошибку. Если это так, это означает, что вы сделали что-то не так в своем коде. Опубликуйте его, а также минимальный воспроизводимый пример с воспроизведением проблемы, если можете.   -  person    schedule 18.03.2019
comment
Возможный дубликат EntryComponents в модуле для отложенной загрузки   -  person Josef Katič    schedule 18.03.2019
comment
Можете ли вы поместить свой модуль приложения, модуль маршрутизации, EmpwiseModule и свой EmpwiseRoutingModule (минимальные коды для воспроизведения проблемы)   -  person Dulanjaya Tennekoon    schedule 18.03.2019
comment
@trichetriche я пытаюсь открыть модальное всплывающее окно, содержащее угловой компонент внутри лениво загруженного модуля. Поэтому я добавил этот компонент в компонент входа, как мы обычно делаем в сценариях такого типа, но он по-прежнему выдает ошибку.   -  person Ankit Makhija    schedule 18.03.2019
comment
У вас ошибка из-за плохого дизайна. Если вы используете многомодульный компонент, это должен быть третий модуль или модуль вызывающего абонента.   -  person    schedule 18.03.2019
comment
@trichetriche Я не использую многомодульный компонент. Мой модальный компонент - это только часть модуля с отложенной загрузкой. Я добавил еще код. Пожалуйста, найдите это выше.   -  person Ankit Makhija    schedule 18.03.2019
comment
@AnkitMakhija Добавьте «ChangeReportingManagerModalComponent» в запись «Компоненты EmpwiseModule». Думаю, это сработает.   -  person Shriniwas b    schedule 18.03.2019
comment
Попробуйте добавить BsModalService в providers массив EmpWiseComponent. Обратите внимание, что я имею в виду поставщиков уровня компонентов   -  person yurzui    schedule 18.03.2019
comment
@Shriniwas Я уже сделал это   -  person Ankit Makhija    schedule 18.03.2019
comment
Привет, ребята, проблема решена. Мне нужно переместить все мои модальные компоненты в общий модуль и импортировать общий модуль в модуль моего сотрудника. Это просто обходной путь, потому что теперь все мои модальные компоненты загружаются вместе с приложением в общий модуль.   -  person Ankit Makhija    schedule 18.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

да, компоненты ввода не работают в ленивых модулях для вашего случая. Когда вы видите хранилище списков в фабрике компонентов, не отображаются компоненты записи, определяющие внутренний Lazy Module. Но у меня есть решение для вас: используйте ПОЛЬЗОВАТЕЛЬСКИЕ ЭЛЕМЕНТЫ (УГЛОВЫЕ ЭЛЕМЕНТЫ) для рендеринга компонентов.

Элементы Angular доступны с версии angular 6, и это упрощает работу. Установите пакет @ angular / elements:

ng add @angular/elements

Добавьте компонент, который вам нужен для рендеринга, в entryComponents of lazy module (не волнуйтесь, это работает в этом случае)

Теперь внутри конструктора 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 );

С уважением, я желаю, чтобы это помогло вам.

person Amn    schedule 29.01.2020