Error : The Component xxx is declared by more than one NgModule

Hello,
i created a component PickupCallCardComponent :

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

@Component({
  selector: 'app-pickup-call-card',
  templateUrl: './pickup-call-card.component.html',
  styleUrls: ['./pickup-call-card.component.scss'],
})
export class PickupCallCardComponent  implements OnInit {

  constructor() { }

  ngOnInit() {}

}

i used this component in home page like this :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';

import { HomePage } from './home.page';
import { PickupCallCardComponent } from 'src/app/components/pickup-call-card/pickup-call-card.component';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [
    HomePage,
    PickupCallCardComponent
  ]
})
export class HomePageModule {}

in page home html i used the selector :

<app-pickup-call-card></app-pickup-call-card>

now i want use this same component in another page pickup-calls.page.html

when i put the declaration of the component :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { PickupCallsPageRoutingModule } from './pickup-calls-routing.module';

import { PickupCallsPage } from './pickup-calls.page';
import { PickupCallCardComponent } from 'src/app/components/pickup-call-card/pickup-call-card.component';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PickupCallsPageRoutingModule
  ],
  declarations: [
    PickupCallsPage,
    PickupCallCardComponent
  ]
})
export class PickupCallsPageModule {}

i have this Error : The Component PickupCallCardComponentis declared by more than one NgModule

how to resolve this please, i am new in angular and ionic

thanks

i solved my problem by using a shared module PickupCallCardModule:

// src/app/components/pickup-call-card/pickup-call-card.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { PickupCallCardComponent } from './pickup-call-card.component';

@NgModule({
  declarations: [PickupCallCardComponent],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule
  ],
  exports: [PickupCallCardComponent] // Export the component to make it available for other modules
})
export class PickupCallCardModule { }

By creating a PickupCallCardModule , declare and export PickupCallCardComponent from a single place, making it reusable in both HomePageModule and PickupCallsPageModule without causing the error of declaring it in multiple modules.

Remove the PickupCallCardComponent declaration and import PickupCallCardModule instead.

like this :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { PickupCallCardModule } from 'src/app/components/pickup-call-card/pickup-call-card.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    PickupCallCardModule // Import the module here
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

and problem solved, finally PickupCallCardModule is reusable in both HomePageModule and PickupCallsPageModule