ionic4 angular7 共通コンポーネントを作成する手順

今回やりたかったことは以下のようなこと
tabsテンプレートで作成したプロジェクトでtab2とtab3で共通の＜app-my-custom>というタグをを呼び出したかった

とりあえずプロジェクトを作成してコンポーネントをつくる

$ ionic start component_test tabs
$ ionic g c components/my-custom --nospec

components.module.ts をつくってコンポーネントを登録する。declationsとexportsに追加

components/components.module.ts

import { NgModule } from '@angular/core';
import { MyCustomComponent } from './my-custom/my-custom.component';

@NgModule({
  declarations: [
    MyCustomComponent
  ],
  imports: [
  ],
  entryComponents: [
  ],
  exports: [
    MyCustomComponent
  ]
})
export class ComponentsModule {}

app.module.tsにcomponents.moduleを登録する

app.module.ts

・・・
import { ComponentsModule } from './components/components.module';

@NgModule({

  ・・・

  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ComponentsModule // ★追加！
  ],

  ・・・

})
export class AppModule {}

pageからコンポーネントを呼び出す

tab2/tab2.module.ts

・・・
import { ComponentsModule } from '../components/components.module';

@NgModule({
  imports: [

    ・・・

    ComponentsModule // ★追加!
  ],
  declarations: [Tab2Page]
})
export class Tab2PageModule {}

tab3もおなじ

おまけ
コンポーネントから別のコンポーネントを呼び出してみる

$ ionic g c components/your-custom --nospec

作成したコンポーネントをmy-customのときと同様にcomponents.module.tsに登録

components/components.module.ts

import { NgModule } from '@angular/core';
import { MyCustomComponent } from './my-custom/my-custom.component';
import { YourCustomComponent } from './your-custom/your-custom.component';

@NgModule({
  declarations: [
    MyCustomComponent,
    YourCustomComponent
  ],
  imports: [
  ],
  entryComponents: [
  ],
  exports: [
    MyCustomComponent,
    YourCustomComponent
  ]
})
export class ComponentsModule {}

components/my-custom/my-custom.component.html

<p>
  my-custom works!
  <app-your-custom></app-your-custom>
</p>

あとは呼び出すだけでOK。以上です