Creating a common header element for ionic app throws error in --prod build

Ionic Framework ionic-v3
1
2

I read that this approach is not recommended by the Ionic team, But I still want to implement it because my ionic headers have some mid-level complex functions and I can’t afford to copy them on every single page I use. I implemented it as below,

  1. remove any reference to the module / component.ts from app.module.ts, remove any imports of the component from app.module.ts,

  2. Import IonicModule in the import section of your header (reusable) module (header,module.ts)

import { NgModule } from '@angular/core';
import { Header } from './header';
import {IonicModule} from "ionic-angular";

@NgModule({
  declarations: [
    Header,
  ],
  imports: [
    IonicModule
  ],
  exports: [
    Header
  ]
})
export class HeaderModule {}

then import the HeaderModule in every other page’s module, remember not in the component.ts file but in the module of that file.

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import {HeaderModule} from "../header/header.module";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    HeaderModule,
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

this works as expected, I don’t notice any side effects and for that animations part, our current project doesn’t care much about animating the title, so if it doesn’t work its not a problem for my use case. Check accordingly for your use case.