"No se encontró fábrica de componentes para PopoverComponent. ¿Ha agregado que" al utilizar elementos de proyecto Ionic5 / Angular8 solución

problema de fondo

Queremos lograr haga clic en los botones pops hasta un contenido de la ventana pop-up le gustaría lograr a través de un componente en una página en un proyecto usando el ambiente Ionic5 / Angular8, creando así un componente PopoverComponent por g iónico. De la siguiente manera:

PS E:\ionicworkspace\mes> ionic g
? What would you like to generate? component
? Name/path of component: func/spc/rubber-qua-spc-result/popover
> ng.cmd generate component func/spc/rubber-qua-spc-result/popover --project=app
CREATE src/app/func/spc/rubber-qua-spc-result/popover/popover.component.html (26 bytes)
CREATE src/app/func/spc/rubber-qua-spc-result/popover/popover.component.spec.ts (689 bytes)
CREATE src/app/func/spc/rubber-qua-spc-result/popover/popover.component.ts (272 bytes)
CREATE src/app/func/spc/rubber-qua-spc-result/popover/popover.component.scss (0 bytes)
[OK] Generated component!

Ts continuación, se utiliza una página de códigos (Página), de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { PopoverComponent } from './popover/popover.component';

@Component({
  selector: 'app-rubber-qua-spc-result',
  templateUrl: './rubber-qua-spc-result.page.html',
  styleUrls: ['./rubber-qua-spc-result.page.scss'],
})
export class RubberQuaSpcResultPage implements OnInit {
  constructor(private popoverController: PopoverController ) { }

  ngOnInit() {
  }

  /**
   * 显示弹出窗口
   * @param ev 事件对象
   */
  public async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
}

Página de códigos HTML

<ion-content>
  <ion-button (click)="presentPopover($event)">弹窗</ion-button>
</ion-content>

Haga clic en Ejecutar botón "pop", informó "No se encontró fábrica de componentes para PopoverComponent ¿Ha agregado a @ NgModule.entryComponents.?" Error, de la siguiente manera:

ERROR Error: Uncaught (in promise): Error: No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for PopoverComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:25607)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25683)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)
    at attachView (ionic-angular.js:2035)
    at resolve (ionic-angular.js:2011)

análisis

Después de la inspección, se encontró que este problema se debe a que no tengo para introducir este componente en el módulo, si la página en los terminales de los componentes.

La resolución de problemas

Encuentra la página donde el código del módulo (xxx.module.ts) para ser modificado, de la siguiente manera:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { NgxEchartsModule } from 'ngx-echarts';

import { RubberQuaSpcResultPage } from './rubber-qua-spc-result.page';
import { PopoverComponent } from './popover/popover.component';

const routes: Routes =[
  {
    path: '',
    component: RubberQuaSpcResultPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    TranslateModule,
    NgxEchartsModule
  ],
  entryComponents: [PopoverComponent],
  declarations: [RubberQuaSpcResultPage, PopoverComponent]
})
export class RubberQuaSpcResultPageModule {}

El código de la llave es el siguiente:

import { PopoverComponent } from './popover/popover.component';
const routes: Routes =[
  {
    path: '',
    component: RubberQuaSpcResultPage
  }
];
@NgModule({
  entryComponents: [PopoverComponent],
  declarations: [RubberQuaSpcResultPage, PopoverComponent]
})
export class RubberQuaSpcResultPageModule {}

Es aumentar entryComponents: [PopoverComponent], para resolver los problemas anteriores. Y la adición de PopoverComponent en las declaraciones, de lo contrario habrá "Componente PopoverComponent no es parte de cualquier NgModule o el módulo no se ha importado en su módulo." Error.