Ionic: How to set a header on multiple pages?

Issue

I've created a new app using Ionic with 3 components, Home, Header and Footer. I'm trying to use Header and Footer on multiple pages (for now only on Home page), by making a reference to them.

I've tried to reference the Header into the Home.page.html but I does not work.

<app-header></app-header>

<ion-content>
    <div class="ion-padding">
        The world is your oyster.
        <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
    </div>
.
.
.

I'm getting the error: ERROR Error: Uncaught (in promise): Error: Unexpected directive 'HeaderPage' imported by the module 'HomePageModule'. Please add a @NgModule annotation. Error: Unexpected directive 'HeaderPage' imported by the module 'HomePageModule'. Please add a @NgModule annotation.

Besides the error, I'm not even sure that the Header is called using <app-header></app-header>

For the modules I have the following codes:

Home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
// import { MatButtonModule, MatCardModule, MatTabsModule, MatChipsModule, MatIconModule, MatToolbarModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule } from "@angular/material";

import { HomePage } from './home.page';
// import { FooterPage } from '../footer/footer.page';
import { HeaderPage } from '../header/header.page';

@NgModule({
  imports: [
    HeaderPage,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { HeaderPage } from './header.page';

const routes: Routes = [
  {
    path: '',
    component: HeaderPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [HeaderPage],
  exports: [
    HeaderPage
 ]
})
export class HeaderPageModule {}

Solution

To make this happen, follow the following steps

1. Create a Module called SharedModule with the command ionic generate module shared
2. Import the SharedModule in the imports' array of your app.module.ts
3. Add your Header and Footer components in the declarations' and exports' array of your shared.module.ts
4. Next add SharedModule in the imports' array of your home.module.ts
5. If ionic tags are not recognized by the compiler in the component you are trying to share, import 'IonicModule' from '@ionic/angular' in the imports array of the shared.module.ts.

This way, when you need to add <app-header> on a new page, just repeat step 4 by adding it to the module of the new page.

When you need to add a new component that can be used globally, just repeat step 3 by adding the component to the SharedModule declarations and export.

Let me know if you need any further help.

Answered By - Bundayy Olayinka