Угловые 6 компонентов дисплея лениво загруженного модуля - PullRequest
Новая
       29

Угловые 6 компонентов дисплея лениво загруженного модуля

0 голосов
/ 30 мая 2018

У меня проблемы с загрузкой компонента из лениво загруженного модуля с использованием Angular 6.

Я создал библиотеку с помощью CLI - ng generate library @org/chat

Обновлен файл angular.json ввключают в себя: 

"lazyModules": [
   "dist/org/chat"
],

и успешную загрузку модуля через AppComponent: 

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

Пока все хорошо, и модуль загружается.

Однако модуль ChatModuleимеет компонент ChatPopupComponent, и я не могу найти способ показать его с помощью диалога (или путем добавления его в контейнер ViewChild).

Чтобы открыть компонент в диалоге, его необходимо объявитьпод модулем entryComponents plus import на уровне AppComponent: 

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

Но при импорте компонента напрямую (и экспорте его из библиотеки) я получаю следующую (очевидную) ошибку: 'Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'.Поскольку это модуль с отложенной загрузкой, он явно еще не импортирован.

Когда я пытаюсь выполнить следующее: 

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      });

Я получаю следующую ошибку - error loading module Error: No component factory found for EmailPopUpComponent. Did you add it to @NgModule.entryComponents?

Кажется, что единственный способ показать компонент - это импортировать модуль в app.module.ts, хотя это не соответствует цели иметь лениво загруженный модуль.

Есть ли способ сделать выше илиЯ что-то упустил из-за ленивой загрузки модулей и компонентов?

Ответы [ 3 ]

0 голосов
/ 01 мая 2019

попробуйте объявить ChatPopupComponent как отдельный модуль.

chat-popup.component.ts 

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [ChatPopupComponent],
    exports: [ChatPopupComponent],
})
export class ChatPopupModule { }

.. сделать то же самоедля EmailPopupComponent ..

email-popup.component.ts 

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [EmailPopupComponent],
    exports: [EmailPopupComponent],
})
export class EmailPopupModule { }

.. и добавьте оба модуля в импорт ChatModule, а такжемассив entryComponents ..

chat.module.ts 

@NgModule({
    imports: [
        CommonModule,
        ...
        ChatPopupModule,
        EmailPopupModule,
    ],
    declarations: [
        ...
    ],
    entryComponents: [
        ChatPopupComponent,
        EmailPopupComponent,
    ]
})
export class ChatModule { }
0 голосов
/ 18 июля 2019

Компонент, из которого вы пытаетесь загрузить свой EmailPopupComponent, должен знать об этом.Это означает, что модуль, в котором объявлен ваш компонент, должен каким-то образом иметь ссылку на ваш EmailPopupComponent.Это можно сделать двумя следующими способами:

  • объявить EmailPopupComponent в том же модуле, что и компонент, желающий получить к нему доступ
  • импортировать модуль, в котором EmailPopupComponent объявлен и экспортирован (важно, чтобы он был виден для других модулей) в модуле (модулях), где объявлен ваш компонент, желающий получить к нему доступ.Это должно быть сделано, например, в SharedModule, содержащем компоненты, распространяющиеся по приложению.

Помимо импорта модулей, в декораторе модулей имеется так называемый массив entryComponents.Он должен, помимо ссылки в модуле, содержать компонент EmailPopupComponent, когда вы используете его в диалоге, подобном диалогу материалов (как вы это делали в своем примере).

0 голосов
/ 17 июля 2018

Вы можете ссылаться на следующие ссылки, которые мне помогли

Угловой сайт ленивой загрузки

Как реализовать

У меня та же проблема, но в Angular 6 кажется, что каждый модуль, загруженный с «отложенной загрузкой», должен быть удален из объявления импорта в корневом модуле (app.module.ts).По крайней мере, для меня это работает.

Stack answer

...