Ionic 5 angular sharing a component between two modules

Question

I have a component called "Recommendations" that i want to render on two different pages. So based on the online resource, I created a shared module and added the component into it. Then i imported the module to the two modules i need. But while trying to compile i get errors like below:

rror: src/app/recommendations/recommendations.component.html:69:5 - error NG8001: 'ion-card-subtitle' is not a known element:
1. If 'ion-card-subtitle' is an Angular component, then verify that it is part of this module.
2. If 'ion-card-subtitle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

69     <ion-card-subtitle>

The declations look like below

@NgModule({
  declarations: [
    RecommendationsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    RecommendationsComponent
  ]
})
export class SharedCompsModule { }

Module1

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    Tab1PageRoutingModule,
    SharedCompsModule
  ],
  declarations: [
    Tab1Page,
  ]
})
export class Tab1PageModule {}

module 2

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    Tab3PageRoutingModule,
    SharedCompsModule
  ],
  declarations: [
    Tab3Page
  ]
})
export class Tab3PageModule {}

What i am missing?

Answer 1

We need to ensure the components declared on the shared module, also have access to the ionic component, we can do this by importing/exporting the other modules required for the component to work! Here I am importing the IonicModule

@NgModule({
  declarations: [
    RecommendationsComponent
  ],
  imports: [
    IonicModule, // <- changed here!
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    RecommendationsComponent
  ]
})
export class SharedCompsModule { }