How to create a global component on ionic.io with angular 11?

Question

Hello I am trying to create a global component on Ionic.io with Angular 11

I made a basic app and generated a component naming header In header component I changed the selector to

Now when I am trying to call the component in any of the modules it throws an error

core.js:14841 NG0304: 'dynamic-header' is not a known element:
1. If 'dynamic-header' is an Angular component, then verify that it is part of this module.
2. If 'dynamic-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

on the console here is the header.component.ts

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

@Component({
  selector: 'dynamic-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

Here is the app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [AppComponent,HeaderComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

I also tried importing the Schema but didn't work Here is the other module contact.module.ts

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

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

import { ContactPageRoutingModule } from './contact-routing.module';

import { ContactPage } from './contact.page';
import { HeaderComponent } from '../header/header.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HeaderComponent,
    ContactPageRoutingModule
  ],
  declarations: [ContactPage]
})
export class ContactPageModule {}

And this is the html code

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>
<dynamic-header></dynamic-header>
<ion-content>
  <ion-grid class="ion-padding">
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle class="ion-padding">Feel free to write to us</ion-card-subtitle>
      <ion-card-title class="ion-padding">Contact Us</ion-card-title>
    </ion-card-header>
    <ion-card-content> 
      echo background using --background
    </ion-card-content>
  </ion-card>
  <ion-row>
  <ion-col class="ion-align-self-center">
    <h3 class="ion-padding">Meet us at our Location</h3>
    <ul>
      <li><strong>Address:</strong> Jalpaiguri, West Bengal</li>
      <li><strong >Email:</strong><ion-button class="mail" href="mailto:[email protected]" size="small" slot="end" color="light" fill="trasparent">[email protected]</ion-button></li>
    </ul>
    </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
    <ion-item>
      <ion-label position="floating"> Your Name</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Email</ion-label>
      <ion-input type="mail"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Subject</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Your Message</ion-label>
      <ion-textarea></ion-textarea>
    </ion-item>
    <ion-item>
      <ion-button type="submit" color="primary" class="ion-text-center" >Submit Query</ion-button>
    </ion-item>
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>