无法通过PopoverController打开共享模块的组件

Question

我在ionic 5.0.0项目中有一个ChatPage组件。我只想通过PopOverController打开该ChatPage。我知道我必须先导入app.module.ts中的ChatPage模块才能通过PopOverController打开它。我已经为其他组件成功完成了此操作。但是这里的问题是ChatPage组件是共享模块的一部分。所以我将共享模块导入到需要聊天页面的所有其他模块。 （而不是将共享模块导入app.module.ts中，而是将其导入到每个单独的模块中。）>

因此，每当我尝试作为弹出浏览器控制台打开ChatPage组件时，都会出现以下错误。

core.js:15724 ERROR Error: Uncaught (in promise): Error: No component factory found for ChatPage. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ChatPage. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:9877)
    at CodegenComponentFactoryResolver.push../node_modules/@angular/core/fesm5/core.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.js:9915)
    at attachView (fesm5.js:2976)
    at fesm5.js:2917
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.run (core.js:17213)
    at fesm5.js:2912
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.js:69)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

这里是shared.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 { ChatPage } from '../chat/chat.page';

const routes: Routes = [
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ChatPage],
  exports: [ChatPage]
})
export class SharedPageModule {}

我将在需要聊天功能的其他模块中按以下方式导入此共享模块。

home.page.ts

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

import { HomePage } from './home.page';
import { SharedPageModule } from '../shared/shared.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    SharedPageModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

这里是我的app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PopoverPageModule } from './popover/popover.module';
import { HttpClientModule } from '@angular/common/http';
import { GlobalFunctions } from '../providers/global-functions';
import { AuthGuard } from '../providers/security/auth-guard';
import { HTTP } from '@ionic-native/http/ngx';
import { HttpProvider } from '../providers/http/http';
import { HttpAngularProvider } from '../providers/http/http-angular';
import { HttpNativeProvider } from '../providers/http/http-native';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { NgxUiLoaderModule } from  'ngx-ui-loader';
import { IonicGestureConfig } from '../providers/IonicGestureConfig';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    HttpClientModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    PopoverPageModule,
    //ChatPageModule --> I cannot import in here because it cause an error like 'ChatPage is part of the declarations of 2 modules: ChatPageModule and SharedPageModule! Please consider moving ChatPage to a higher module that imports ChatPageModule and SharedPageModule.'
    NgxUiLoaderModule,
    
  ],
  providers: [
    HttpProvider,
    HttpAngularProvider,
    HttpNativeProvider,
    GlobalFunctions,
    AuthGuard,
    StatusBar,
    ScreenOrientation,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HAMMER_GESTURE_CONFIG,useClass: IonicGestureConfig },
    HTTP
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我在ionic 5.0.0项目中有一个ChatPage组件。我只想通过PopOverController打开该ChatPage。我知道我必须在app.module.ts中导入ChatPage模块才能打开...

Answer 1

最终得到1个解决方案。