在Ionic5/Angular8项目中使用组件时出现“No component factory found for PopoverComponent. Did you add it”的解决

柔情只为你懂 2023-07-18 09:40 7阅读 0赞

### 在Ionic5/Angular8项目中使用组件时出现“No component factory found for PopoverComponent. Did you add it”的解决 ###

*  问题背景
 *  问题分析
 *  问题解决

# 问题背景 #

在一个使用Ionic5/Angular8环境的项目中想在一个页面中实现点击按钮弹出一个窗口，弹出窗口的内容想通过一个Component实现，因此就通过ionic g创建了一个组件PopoverComponent。如下：

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!

然后在一个页面（Page）中的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>

运行点击“弹窗”按钮，报"No component factory found for PopoverComponent. Did you add it to @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 { }

> 就是增加entryComponents:\[PopoverComponent\]，用于解决上面的问题。并且在declarations中加入PopoverComponent，不然还会出现“Component PopoverComponent is not part of any NgModule or the module has not been imported into your module.”错误。