Ionic4でカスタムコンポーネントを使う方法

デフォルトで作成されるhome.page.tsにカスタムコンポーネントを表示させる方法に苦戦したので、
記録として残しておきます。

カスタムコンポーネント用ファイルの作成

testという名称のコンポーネントファイルを作ります。
コマンドラインからまとめて複数のファイルを作ることができます。
プロジェクトのルートディレクトリで実行します。

ionic generate component components/test --nospec

作られるファイルは下記。

• test.component.html
• test.component.scss
• test.component.ts

作られたファイルのうちの一つ、test.component.tsの下記がHTMLの要素になります。

@Component({
  selector: 'app-test', // これ
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})

カスタムコンポーネントの読み込み

home.module.ts　（app.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 { HomePage } from './home.page';

import { TestComponent } from '../components/test/test.component'; // 追加

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

カスタムコンポーネントの配置

読み込ませられたら、カスタムコンポーネントを配置します。
home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <app-test></app-test> <!-- カスタムコンポーネント -->
  </div>
</ion-content>

この状態で ionic serve や ionic cordova build を行うと、
カスタムコンポーネントを利用することができます。
あとは適宜、HTML/SCSS/TSを書き換えてカスタマイズしてください。