「いいえ部品工場がPopoverComponent見つかりません。あなたはそれを追加しました」ソリューションのコンポーネントを使用してIonic5 / Angular8プロジェクト

背景問題

私たちは、このように、イオングラムによってコンポーネントPopoverComponentを作成し、Ionic5 / Angular8環境を使用して、プロジェクト内のページ上のコンポーネントを介して達成したいウィンドウをポップアップウィンドウの内容をバックアップボタンポップをクリック実現したいです。次のとおりです。

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は、コード・ページ（ページ）は、使用されます。

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();
  }
}

下記のページのHTMLコード

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

ボタンを「ポップ」ファイル名を指定して実行]をクリックし、報告されていないエラーを、以下のように「いいえ部品工場をPopoverComponentはあなたがNgModule.entryComponents @にそれを追加しました件見つかりました。？」：

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)

分析

検査の後、我々はどこ部品のリードのページならば、私は、モジュールで、このコンポーネントを導入する必要がないため、この問題があることがわかりました。

問題解決

次のように、モジュール（xxx.module.ts）コードを修正するページを見つけます。

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 {}

次のようにキーコードは次のようになります。

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

上記課題を解決するために、[PopoverComponent]：entryComponentsを高めることです。そして宣言でPopoverComponentを追加すると、それ以外の場合は「コンポーネントPopoverComponentは、任意のNgModuleの一部ではないか、モジュールがあなたのモジュールにインポートされていない。」エラーが発生します。