找不到组件工厂...打开模态

import { ModalComponent } from './modal/modal.component';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [
    ModalComponent
  ],
  imports: [
    ModalModule.forRoot()
  ]
})
export class AppModule { }

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { ModalService } from './modal.service';

@Component({
  selector: 'app-root',
  template: `<ng-container #modalContainer></ng-container>`
})
export class AppComponent {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private modalService: ModalService,
    private viewContainerRef: ViewContainerRef
  ) {}

  openModal() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.modalService.setComponentRef(componentRef);
  }
}

npm update @angular/core @angular/common @angular/forms ngx-bootstrap/modal

import { Component } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <p>This is a modal!</p>
      </div>
    </div>
  `,
  styles: [`
    .modal {
      display: block;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    .close-button {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close-button:hover,
    .close-button:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  `]
})
export class ModalComponent {
  constructor() {}
}

import { Component } from '@angular/core';
import { ModalComponent } from './modal/modal.component';
import { ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<button (click)="openModal()">Open Modal</button>
             <ng-container #modalContainer></ng-container>`
})
export class AppComponent {
  @ViewChild('modalContainer', { read: ViewContainerRef }) modalContainer: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  openModal() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
    const componentRef = this.modalContainer.createComponent(componentFactory);
  }
}