[Fixed] Error: Type Component is part of the declarations of 2 modules

Issue

i am calling a component in the HTML of a page in ionic , so i added the component to the declarations array of the page.module.ts :

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DeleteFriendsPageRoutingModule
  ],
  declarations: [DeleteFriendsPage,CommunityCardAccordionComponent,GroupTabsComponent],
  entryComponents:  []
})
export class DeleteFriendsPageModule {}

i got this error :

Error: Type CommunityCardAccordionComponent is part of the declarations of 2 modules: CommunityPageModule and DeleteFriendsPageModule! Please consider moving CommunityCardAccordionComponent to a higher module that imports CommunityPageModule and DeleteFriendsPageModule. You can also create a new NgModule that exports and includes CommunityCardAccordionComponent then import that NgModule in CommunityPageModule and DeleteFriendsPageModul

Solution

The problem is as the error says

CommunityCardAccordionComponent is part of the declarations of 2 modules

In simple terms, you cannot declare a component in more than one module…

On the other hand you can import the same module more than once! So your solution is to simply use modules, follow this steps

1. Remove CommunityCardAccordionComponent from BOTH CommunityPageModule and DeleteFriendsPageModule

2. Inside your path/to/community-card-accordion-component/, create a module CommunityCardAccordionModule

@NgModule({
  imports: [CommonModule],
  declarations: [CommunityCardAccordionComponent]
})
export class CommunityCardAccordionModule { }

3. Import CommunityCardAccordionModule in both CommunityPageModule and DeleteFriendsPageModule

Thats it, you solve the issue, now CommunityCardAccordionComponent is only declared in one module