Comment inclure un modèle de composant dans un autre?

J'utilise l'application ionic 5.0.0 et j'ai une page de discussion et une page d'accueil dedans. Je souhaite inclure la page de discussion dans la page d'accueil. équivalent à ng-include .

J'ai ajouté le exports[ dans mon chat.module.ts comme indiqué ci-dessous

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpProvider } from '../../providers/http/http';
import { GlobalFunctions } from '../../providers/global-functions';
import { Router, NavigationEnd } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import * as _ from 'underscore';
import { NgxUiLoaderService } from 'ngx-ui-loader';
import { Platform } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {
...
}

Ensuite, j'ai importé le module de chat dans mon app.module.ts strong> comme suit

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

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Ensuite, j'ai ajouté le sélecteur de composant de chat dans ma home.page.html comme suit.

<ion-header>
    <ion-toolbar>
        <ion-title text-center>HOME</ion-title>                
    </ion-toolbar>
</ion-header>

<ion-content  class="homepage-content no-scroll" >
<ion-row>
...
</ion-row>

<ion-row>
 ...
 </ion-row>

<ion-row>  
<app-chat></app-chat> <!-- Here it is -->
</ion-row>

</ion-content>

Mais lorsque j'exécute mon application, j'obtiens une erreur ci-dessous dans la console.

Voici mon chat.page.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';
import { ChatPageModule } from './chat/chat.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    HttpClientModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    PopoverPageModule,
    NgxUiLoaderModule,
    ChatPageModule // --> Here it is
  ],
  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 {}

Voici ma page d'accueil. 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.page';

const routes: Routes = [
  {
    path: '',
    component: ChatPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  exports: [ChatPage], // --> Here it is
  declarations: [ChatPage]
})
export class ChatPageModule {}

Voir la structure de mon code du module de discussion et du module d'accueil. Les deux sont des modules différents.

p >