alertController only displays on the first page it was initalized on

Ionic Framework
1

I have a weird problem with the alertController in Ionic.

Let me describe it and then I will lay out my code.

I have an app in Ionic with tabs. So lets say I reload my app and land on Tab 1, I click a button and get an alert on that page. Then if I were to navigate to Tab 2, click another button to get a different alert. That alert doesn’t show up on Tab 2. But if I were to navigate to Tab 1, it will be there.

Here is my code for Tab 1

	const alert = await this.alertCtrl.create({
		header: 'Approved!',
		backdropDismiss: false,
		message:
			'Your application has been approved! You may start shopping now',
		buttons: [
			{
				text: 'Shop!',
				handler: async () => {
					this.util.navigateRoot('/shop');
				},
			},
		],
	});

	await alert.present();

And Tab 2

	const alert = await this.alertCtrl.create({
		header: 'Submitted!',
		backdropDismiss: false,
		message:
			'Awaiting approval',
		buttons: [
			{
				text: 'Shop!',
				handler: async () => {
					this.util.navigateRoot('/shop');
				},
			},
		],
	});

	await alert.present();

And of course I am importing alertController into the constructor of the component

I have done so much searching on this and no one seems to have the same issue.

2

Indeed weird and without seeing other code (nor knowing which part to ask), I’d start a new app using tabs, and try this again on the two pages.

And likely it will work then in that app