How to create a reusable component with Ionic 3 and Angular 4

You need to remove it from app.module.ts since it has been declared in the ComponentsModule.

app.module.ts

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    //AppHeaderComponent <-- need to remove this
  ],

After that, you need to import the ComponentsModule as shown below on the page's module where you need it.

my.module.ts

@NgModule({
  declarations: [
    MyPage,
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ComponentsModule <-- here you need
  ],
})
export class MyPageModule { }

This is how ComponentsModule should look like otherwise, you won't be able to use ionic wrappers like ion-grid, ion-row etc.

components.module.ts

import {NgModule} from '@angular/core';
import {CreatePostComponent} from './create-post/create-post';
import {IonicModule} from "ionic-angular";

@NgModule({
    declarations: [
    CreatePostComponent,
  ],
    imports: [
    IonicModule, <== make sure to import IonicModule
  ],
    exports: [
    CreatePostComponent,
  ]
})
export class ComponentsModule {}

and then after this, you would wanna put ComponentsModule inside imports array of any other component's module.ts file where you want to use it. Here, for example, I want to use CreatePostComponent inside my newsfeed page (ionic page).

newsfeed.module.ts

@NgModule({
  declarations: [
    NewsfeedPage,
  ],
  imports: [
    IonicPageModule.forChild(NewsfeedPage),
    ComponentsModule
  ],
})

and voila, you can then use your CreatePostComponent selector (create-post in my case) inside newsfeed.html.

<create-post></create-post>