Ionic modal won't work on Android

Ionic Framework
1

Hello people! I have a problem with the component ion-modal and I don’t know how to fix it.

I have a contrelled modal in my Angular (16) + Ionic (7) application:

		<div *ngFor="let timeframe of match.timeframes; index as i" class="ion-padding-top">
			<ion-button expand="block" (click)="openModal(i)">
				From: {{ convertDate(timeframe.start) | date : "short" }} to: {{ convertDate(timeframe.end) | date : "short" }}
			</ion-button>
		</div>

The openModal function is the following:

	async openModal(index: number) {
		if (!this.match?.timeframes) return;

		this.selectedTime = this.match.timeframes[index]?.start;
		const modal = await this.modalCtrl.create({
			component: AcceptModal,
			componentProps: {
				timeframe: this.match.timeframes[index],
			},
		});

		modal.present();

		const { data, role } = await modal.onWillDismiss();

		if (role === "confirm") {
			this.accept(data);
		}
	}

And the AcceptModal component is the following:

<ion-header>
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-button color="medium" (click)="cancel()">Cancel</ion-button>
		</ion-buttons>
		<ion-buttons slot="end">
			<ion-button color="medium" (click)="confirm()">Confirm</ion-button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>
<ion-content class="block">
	<ion-item>
		<ion-datetime confirm="" [(ngModel)]="selectedTimeframe" min={{timeframe?.start}}
			max={{timeframe?.end}}></ion-datetime>
	</ion-item>
</ion-content>

This is the ts:

import { Component, Input } from "@angular/core";
import { IonicModule, ModalController } from "@ionic/angular";
import { Timeframe } from "../api/v1";
import { FormsModule } from "@angular/forms";

@Component({
	selector: "accept-modal",
	templateUrl: "./accept-modal.component.html",
	styleUrls: ["./accept-modal.component.scss"],
	standalone: true,
	imports: [IonicModule, FormsModule],
})
export class AcceptModal {
	@Input() timeframe: Timeframe | null = null;
	selectedTimeframe: string | undefined = "";

	constructor(private modalCtrl: ModalController) {}

	ngOnInit() {
		this.selectedTimeframe = this.timeframe?.start;
	}

	cancel() {
		return this.modalCtrl.dismiss(null, "cancel");
	}

	confirm() {
		return this.modalCtrl.dismiss(this.selectedTimeframe, "confirm");
	}
}

On the browser the modal works perfectly, but on the android emulator and on a real device the modal won’t even show. No errors whatsoever…

So I tried the inline modal, which is the one reccomended in the documentation:

		<ion-button id="open-modal" expand="block">Open</ion-button>
		<ion-modal trigger="open-modal">
			<ng-template>
				<ion-header>
					<ion-toolbar>
						<ion-buttons slot="start">
						</ion-buttons>
						<ion-title>Welcome</ion-title>
						<ion-buttons slot="end">
						</ion-buttons>
					</ion-toolbar>
				</ion-header>
				<ion-content class="ion-padding">
					<ion-item>
						<ion-input label="Enter your name" labelPlacement="stacked" type="text" placeholder="Your name"></ion-input>
					</ion-item>
				</ion-content>
			</ng-template>
		</ion-modal>

and even this one won’t open…

How can I fix this?

2

You state no console errors so, What debugging techniques have you tried to come to your conclusion? https://stackoverflow.com/help/how-to-ask

3

I am also experiencing similar issue with ionic 8, angular 16, 17 and 18, with capacitor android 6.1.0

this is the snippet of my code

  async handleAddDevice() {
    try {
      const modal = await this.modalCtrl.create({
        component: CreateEditDevicePage,
      });
// if i write some code on this line it is not being called, same goes with modal.present()
      modal.present()
    } catch (error) {
      this.toastHelper.presentToast({
        message: 'catch triggered'
      })
    } finally {
      this.toastHelper.presentToast({
        message: 'try catch ended'
      })
    }
  }

catch and finally here are not being triggered on android but is working correctly on web, and I am not able to try it on ios

I have this feeling that somewhere on the create function a part of code do not complete a promise

4

Short update that might help with debugging.
I turned off script optimization in angular.json and the modal did work for some reason.