I'm trying to declare a custom component to use in two different pages (of my ionic app) but getting an error - ionic-framework

Question

I'm trying to use a custom component called UserCardComponent in two different pages in my ionic v3 app.
I followed this answer (the one with 26 votes) which says to declare custom components in "a specific page's module.ts file". Custom component in ionic v3
So I firstly declared the component in my HomePageModule and was able to use it fine within the home.html.
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardComponent } from '../../components/user-card/user-card';
#NgModule({
declarations: [
HomePage,
UserCardComponent
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
I then tried to declare it (in the same way) in ContactsPageModule to use in contacts.html however I get the following error:
Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule!
Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule.
You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule
When I try to just declare the UserCardComponent in the app.module.ts file I get a Template parse error and the custom component won't work in any pages.
Can you advise me on what to do? The error says to move the "UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. "
Can you tell me how I would do this? I'm new to ionic. Thanks

Answer 1

If you declare the UserCardComponent in the HomePageModule, you only need to import the HomePageModule in the ContactsPageModule but it introduces dirty dependency between theses modules.
A better way is to declare UserCardComponent in a specific module UserCardModule and then to import this specific module in HomePageModule and in ContactsPageModule.
user-card.module.ts
import { NgModule } from '#angular/core';
import { UserCardComponent } from './user-card';
#NgModule({
declarations: [
UserCardComponent
]
})
export class UserCardModule {}
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardModule } from '../../components/user-card/user-card.module';
#NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
UserCardModule
],
})
export class HomePageModule {}