Simple ModalService для Angular 7 не открывается: фабрика компонентов не найдена для

Question

Я создаю Angal's 7 ModalService, который просто открывает модал ( Пример StackBlitz ).

Модальным содержимым должен быть компонент, передаваемый модалу при открытии.

Модальный

export class Modal {

  protected modal: any = null;

  close() {
    this.modal.close();
  }

}

ModalService

import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private componentRef: any;
  private modalContainer: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector) { }

  private createFormModal(component: any): Element {

    this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

    this.componentRef.instance.modal = this;

    this.appRef.attachView(this.componentRef.hostView);

    return (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
  }

  open(component: any): void {

    const alertElement = this.createFormModal(component);

    const content = document.createElement('div');
    content.classList.add('modal');
    content.appendChild(alertElement);

    this.modalContainer = document.createElement('div');
    this.modalContainer.classList.add('modal');
    this.modalContainer.appendChild(content);

    document.body.appendChild(this.modalContainer);

  }

  close(): void {
    this.appRef.detachView(this.componentRef.hostView);
    this.modalContainer.parentNode.removeChild(this.modalContainer);
    this.componentRef.destroy();
  }

}

Я не уверен, что это лучший вариант, но он не работает...

Когда я пытаюсь открыть модал, я получаю следующую ошибку:

Error: No component factory found for HelloComponent. 
       Did you add it to  Did you add it to @NgModule.entryComponents?

Чего мне не хватает?И можно ли улучшить этот код ModalService?

Answer 1

Добавить HelloComponent в компонент ввода @NgModule:

@NgModule({
     imports:[ BrowserModule, FormsModule ],
     declarations:[ AppComponent, HelloComponent ],
      entryComponents:[HelloComponent],
      bootstrap: [ AppComponent ]
 })

 export class AppModule { }

Answer 2

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

Так что ваш app.module.ts должен выглядеть так -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  entryComponents:[HelloComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Вот обновленная демонстрация стекаблиц -

https://stackblitz.com/edit/mk-angular-modal-service-6qhrps

Вот дополнительная информация о entryComponents

https://angular.io/guide/entry-components

В вашем модале все еще есть проблема css, которую необходимо исправить.