angular(ionic4)で'app-top' is not a known elementエラーがでる

angular(ionic4)で親コンポーネントから子コンポーネントにデータ受け渡しをしようとしています。
そこで下記のエラーが出ました。
原因がわからないのでご教授いただければと思います。

エラー

'app-top' is not a known element

select-user.page.html(親)

<ion-content forceOverscroll="false">
  <!-- 「だれがつかいますか？」を囲う headingクラス -->
  <div class="heading">
    <span class="heading__title">誰が使いますか？</span>
  </div>

  <app-top **ngIf="characterImage">
    {{ characterImage }}
  </app-top>

  <!-- キャラクター全員を<div>で囲う character クラス -->
  <div class="character">
    <div class="character__personal" *ngFor="let user of mainUser">
      <!-- キャラクター画像 -->
      <input type="radio" name="radio" class="personal_type_radio" /><img src="../../assets/images/chara12@2x.png"
        class="personal_image_personalImage" (click)="moveTop(user)" />
      <!-- キャラクター名 -->
      <div class="personal_name_personalName">
        <p class="personalName">{{ user.nickname }}</p>
      </div>
    </div>
  </div>
</ion-content>

select-user.page.ts

import { Component, OnInit } from "@angular/core";
import { SelectUserService, mainUser } from "src/app/select-user.service";
import { NavController } from "@ionic/angular";

@Component({
  selector: "app-select-user",
  templateUrl: "./select-user.page.html",
  styleUrls: ["./select-user.page.scss"]
})
export class SelectUserPage implements OnInit {
  constructor(
    private selectUserService: SelectUserService,
    private navController: NavController
  ) {}

  ngOnInit() {
    // メインユーザーの情報の取得
    this.getcreateMainUser();
  }


  // キャラクター画像を入れるプロパティー
  characterImage: mainUser;

  moveTop(user: mainUser) {
    this.characterImage = user;
    this.navController.navigateForward("/top");
    console.log(this.characterImage);
  }


}

top.page.html(子)

  <div *ngIf="topCharacterImage">
      {{ topCharacterImage }}
    </div>

top.page.ts

import { Component, OnInit, Input } from "@angular/core";
import { SelectUserService, mainUser } from "src/app/select-user.service";
//　アラート
import { NavController, AlertController } from "@ionic/angular";
// モーダル
import { ModalController } from "@ionic/angular";
import { SearchModalPage } from "../search-modal/search-modal.page";

@Component({
  selector: "app-top",
  templateUrl: "./top.page.html",
  styleUrls: ["./top.page.scss"]
})
export class TopPage implements OnInit {

  // ユーザー選択画面(select-user)からキャラクター画像情報を引き渡し
  @Input() topCharacterImage: mainUser[];

}