Error: Uncaught (in promise): overlay does not exist (ionic toast)

I had this error in console with multiple ionic toast stacked on top of each other. This is how you would resolve this using Ionic 5 in Angular 12 projects.

Solution

First, this is my component:

<ion-icon *ngIf="this.IsWatched"
          class="cursor-pointer" size="24" src="/assets/icon/bell_watching.svg"
          (mouseover)="presentToast('is_watching')"
          (mouseleave)="dismissToasts()"
          (click)="whatever()">
</ion-icon>

In my card.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {HttpErrorResponse} from '@angular/common/http';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
})
export class CardComponent implements OnInit {
  @Input() Bundle!: Bundle;
  IsWatched: boolean = false;

  constructor(
    public toastController: ToastController,
  ) {
  }

  async presentToast(type: string) {
    this.toastController.dismiss().then((obj) => {
    }).catch(() => {
    }).finally(() => {
      this.manageToast(type);
    });
  }

  manageToast(type: string) {
    let message = '';
    switch (type) {
      case 'not_watching':
        message = 'x'
        break;
      case 'is_watching':
        message = 'x'
        break;
    }
    const toast = this.toastController.create({
      message,
      cssClass: 'toastbottom',
      color: 'primary',
    }).then((obj) => {
      obj.present();
    });
  }

  dismissToasts() {
    if (this.toastController) {
      this.toastController.dismiss();
    }
  }

}