Как создать глобальный компонент на ionic.io с угловым 11?

Question

Здравствуйте, я пытаюсь создать глобальный компонент на Ionic.io с помощью Angular 11.

Я сделал базовое приложение и сгенерировал заголовок именования компонентов. В компоненте заголовка я изменил селектор на

Теперь, когда я пытаюсь вызвать компонент в любом из модулей, он выдает ошибку

      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.

на консоли вот заголовок.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() {}

}

Вот 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 {}

Я также пытался импортировать схему, но это не сработало Вот другой модуль 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 {}

А это html код

      <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:[e-mail]" size="small" slot="end" color="light" fill="trasparent">[e-mail]</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>