Ionic 8, Angular 18 - Standalone PWA App. Toast doesn't show up in PWA

The toast works fine in the dev environment when I run the app using ionic serve. But when I build it for production using ionic build --prod for my PWA it won't show up. I have tried everything including clearing the cache, and even disabling the timeout for toast. But no success. Below is my code:

toast.service.ts

import { Injectable } from '@angular/core';
import { ToastController, ToastButton } from '@ionic/angular';

@Injectable({
providedIn: 'root'
})

export class ToastService {
constructor(public toastController: ToastController) {}
async presentToast(infoMessage: string) {

const dismissButton: ToastButton = {
text: 'Dismiss',
role: 'cancel', // 'cancel' allows dismissing the toast
handler: () => {
}
};

const toast = await this.toastController.create({
message: infoMessage,
position: 'middle',
color: 'primary',
buttons: [dismissButton],
duration: 9000
});
toast.present();
}

}


I can confirm that I have imported ToastService in my page.ts file and declared it in constructor as follows:

import { ToastService } from './../../services/toast.service';

constructor(
private toastService: ToastService,
.... // other declarations
){ }


Below is the code for the function that calls the toast in my page.ts. I can verify that the post call works as intended and router.navigate has no impact on the toast as I have tried by commenting out that line too.

this.http.post(apiUrl,this.postData, { headers: headers }).subscribe({
next: (res: any) => {
this.toastService.presentToast('Page Updated.');
this.router.navigate(['home/settings/pages/' + res.id], {state: res});
},
error: (error: any) => {
this.toastService.presentToast('Something went wrong. Please try again.');
}
});

Continue reading...