Ionic 3: One header component for several pages
As suggested by the error message, you want to create a shared NgModule that both declares and exports your shared header component. For example:
shared.module.ts
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {HeaderComponent} from './header-component';
@NgModule({
imports: [IonicPageModule.forChild(HeaderComponent)],
declarations: [HeaderComponent],
exports: [HeaderComponent]
}) export class SharedModule {}
Then you need to import that NgModule
in all of the modules that use it.
Consuming code will have the form
page-one.module.ts
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {SharedModule} from './shared.module';
@NgModule({
imports: [IonicPageModule, SharedModule]
}) export class PageOneModule {}
page-two.module.ts
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {SharedModule} from './shared.module';
@NgModule({
imports: [IonicPageModule, SharedModule]
}) export class PageTwoModule {}
If you want to know why Angular punishes you for correctly following your instincts to reduce duplication by creating shared constructs, that is anyone's guess.