@ NgModule.entryComponents и компоненты, созданные динамически

Question

Я открываю модал двумя разными способами Пример Stackblitz :

1. Вызов метода в компоненте, который вызывает модальную службу:

   <button (click)="openModal()">Open Modal</button>
   
   export class AppComponent  {
   
     constructor(private modalService: ModalService) { }
   
     openModal() {
       this.modalService.open(HelloComponent);
     }
   
   }
   

   Модальная служба создает компонент динамически.

2. Используя директиву, которая затем вызывает ModalService:

   <button [modal]="'HelloComponent'">Open Modal</button>
   
   @Directive({
     selector: '[modal]'
   })
   
   export class ModalDirective {
   
     @Input('modal') identifier: string;
   
     constructor(private modalService: ModalService) { }
   
     @HostListener('click', ['$event'])
     clickEvent(event) {
   
       event.preventDefault();
       event.stopPropagation();
       this.modalService.open(this.identifier);
   
     }
   
   }
   

Option (1) работает нормально, но option (2) возвращает ошибку:

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

В моем AppModule есть следующее:

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

Так что я не уверен, почему это не работает...

Answer 1

Вам нужно псевдоним ссылка на HelloComponent.

Обновление app.component

export class AppComponent  {

  modalComp = HelloComponent;

  constructor(private modalService: ModalService) { }

  openModal() {
    this.modalService.open(this.modalComp);
  }

}

и шаблон:

<div style="text-align:center">
  <h1>Modal Example</h1>

  <button (click)="openModal()">Open Modal</button>

  <button [modal]="modalComp">Open Modal</button>

</div>

Обновлен стек: https://stackblitz.com/edit/mk-angular-modal-service-bzn8z7?file=src%2Fapp%2Fapp.component.html