refactor(angular): alert controller uses correct core instance (#28538)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
As a takeaway from our learning session about a menuController bug in
Ionic Angular, the team would like to update our other providers to use
the same architecture as the menuController to prevent this kind of
issue from happening again in the future.

We also noticed that the common provider does not provide much value and
it's easier to just have two separate implementations in `src` and
`standalone`. (There wasn't much code we could de-duplicate)

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed the common alert provider in favor of separate ones in
src/standalone

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

packages/angular/common/src/index.ts

@@ -1,4 +1,3 @@
-export { AlertController } from './providers/alert-controller';
 export { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { DomController } from './providers/dom-controller';

packages/angular/src/index.ts

@@ -20,7 +20,6 @@ export * from './directives/validators';
 
 // PROVIDERS
 export {
-  AlertController,
   LoadingController,
   DomController,
   NavController,
@@ -34,6 +33,7 @@ export {
   ViewDidEnter,
   ViewDidLeave,
 } from '@ionic/angular/common';
+export { AlertController } from './providers/alert-controller';
 export { AnimationController } from './providers/animation-controller';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { GestureController } from './providers/gesture-controller';

packages/angular/src/providers/alert-controller.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { OverlayBaseController } from '@ionic/angular/common';
+import type { AlertOptions } from '@ionic/core';
+import { alertController } from '@ionic/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
+  constructor() {
+    super(alertController);
+  }
+}

packages/angular/standalone/src/index.ts

@@ -6,6 +6,7 @@ export { IonRouterLink, IonRouterLinkWithHref } from './navigation/router-link-d
 export { IonTabs } from './navigation/tabs';
 export { provideIonicAngular } from './providers/ionic-angular';
 export { ActionSheetController } from './providers/action-sheet-controller';
+export { AlertController } from './providers/alert-controller';
 export { AnimationController } from './providers/animation-controller';
 export { GestureController } from './providers/gesture-controller';
 export { MenuController } from './providers/menu-controller';
@@ -14,7 +15,6 @@ export { PickerController } from './providers/picker-controller';
 export { PopoverController } from './providers/popover-controller';
 export { ToastController } from './providers/toast-controller';
 export {
-  AlertController,
   LoadingController,
   DomController,
   NavController,

packages/angular/standalone/src/providers/alert-controller.ts

@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
+import { OverlayBaseController } from '@ionic/angular/common';
 import type { AlertOptions } from '@ionic/core/components';
 import { alertController } from '@ionic/core/components';
 
-import { OverlayBaseController } from '../utils/overlay';
-
 @Injectable({
   providedIn: 'root',
 })

packages/angular/test/base/e2e/src/lazy/providers.spec.ts

@@ -1,7 +1,7 @@
 describe('Providers', () => {
   beforeEach(() => {
     cy.visit('/lazy/providers');
-  })
+  });
 
   it('should load all providers', () => {
     cy.get('#is-loaded').should('have.text', 'true');
@@ -26,7 +26,7 @@ describe('Providers', () => {
     cy.visit('/lazy/providers?firstParam=abc&secondParam=true');
 
     cy.get('#query-params').should('have.text', 'firstParam: abc, firstParam: true');
-  })
+  });
 
   // https://github.com/ionic-team/ionic-framework/issues/28337
   it('should register menus correctly', () => {
@@ -40,10 +40,15 @@ describe('Providers', () => {
     cy.get('ion-action-sheet').should('be.visible');
   });
 
+  it('should open an alert', () => {
+    cy.get('button#open-alert').click();
+
+    cy.get('ion-alert').should('be.visible');
+  });
+
   it('should open a picker', () => {
     cy.get('button#open-picker').click();
 
     cy.get('ion-picker').should('be.visible');
   });
 });
-

packages/angular/test/base/e2e/src/standalone/overlay-controllers.spec.ts

@@ -3,6 +3,12 @@ describe('Overlay Controllers', () => {
     cy.visit('/standalone/overlay-controllers');
   });
 
+  it('should present an alert', () => {
+    cy.get('button#open-alert').click();
+
+    cy.get('ion-alert').should('be.visible');
+  });
+
   it('should present a modal', () => {
     cy.get('button#open-modal').click();
 

packages/angular/test/base/src/app/lazy/providers/providers.component.html

@@ -45,6 +45,7 @@
   </p>
 
   <button id="set-menu-count" (click)="setMenuCount()">Set Menu Count</button>
+  <button id="open-alert" (click)="openAlert()">Open Alert</button>
   <button id="open-action-sheet" (click)="openActionSheet()">Open Action Sheet</button>
   <button id="open-picker" (click)="openPicker()">Open Picker</button>
 </ion-content>

packages/angular/test/base/src/app/lazy/providers/providers.component.ts

@@ -1,8 +1,17 @@
 import { Component, NgZone } from '@angular/core';
 import {
-  Platform, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController, PickerController, MenuController,
-  LoadingController, NavController, DomController, Config
+  Platform,
+  ModalController,
+  AlertController,
+  ActionSheetController,
+  PopoverController,
+  ToastController,
+  PickerController,
+  MenuController,
+  LoadingController,
+  NavController,
+  DomController,
+  Config,
 } from '@ionic/angular';
 
 @Component({
@@ -10,7 +19,6 @@ import {
   templateUrl: './providers.component.html',
 })
 export class ProvidersComponent {
-
   isLoaded = false;
   isReady = false;
   isResumed = false;
@@ -25,7 +33,7 @@ export class ProvidersComponent {
 
   constructor(
     private actionSheetCtrl: ActionSheetController,
-    alertCtrl: AlertController,
+    private alertCtrl: AlertController,
     loadingCtrl: LoadingController,
     private menuCtrl: MenuController,
     private pickerCtrl: PickerController,
@@ -40,8 +48,18 @@ export class ProvidersComponent {
   ) {
     // test all providers load
     if (
-      actionSheetCtrl && alertCtrl && loadingCtrl && menuCtrl && pickerCtrl &&
-      modalCtrl && platform && popoverCtrl && toastCtrl && navCtrl && domCtrl && config
+      actionSheetCtrl &&
+      alertCtrl &&
+      loadingCtrl &&
+      menuCtrl &&
+      pickerCtrl &&
+      modalCtrl &&
+      platform &&
+      popoverCtrl &&
+      toastCtrl &&
+      navCtrl &&
+      domCtrl &&
+      config
     ) {
       this.isLoaded = true;
     }
@@ -91,12 +109,26 @@ export class ProvidersComponent {
 
   async openActionSheet() {
     const actionSheet = await this.actionSheetCtrl.create({
-      buttons: ['Button']
+      buttons: ['Button'],
     });
 
     await actionSheet.present();
   }
 
+  async openAlert() {
+    const alert = await this.alertCtrl.create({
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+      ],
+      header: 'Alert!',
+    });
+
+    await alert.present();
+  }
+
   async openPicker() {
     const picker = await this.pickerCtrl.create({
       columns: [],
@@ -105,7 +137,7 @@ export class ProvidersComponent {
           text: 'Cancel',
           role: 'cancel',
         },
-      ]
+      ],
     });
 
     await picker.present();

packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.html

@@ -1,4 +1,5 @@
 <div>
+  <button id="open-alert" (click)="openAlert()">Open Alert</button>
   <button id="open-modal" (click)="openModal()">Open Modal</button>
   <button id="open-picker" (click)="openPicker()">Open Picker</button>
   <button id="open-popover" (click)="openPopover($event)">Open Popover</button>

packages/angular/test/base/src/app/standalone/overlay-controllers/overlay-controllers.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ModalController, PickerController, PopoverController } from '@ionic/angular/standalone';
+import { AlertController, ModalController, PickerController, PopoverController } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-overlay-controllers',
@@ -8,14 +8,29 @@ import { ModalController, PickerController, PopoverController } from '@ionic/ang
 })
 export class OverlayControllersComponent {
   constructor(
+    private alertCtrl: AlertController,
     private modalCtrl: ModalController,
     private pickerCtrl: PickerController,
     private popoverCtrl: PopoverController
   ) {}
 
+  async openAlert() {
+    const alert = await this.alertCtrl.create({
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+      ],
+      header: 'Alert!',
+    });
+
+    await alert.present();
+  }
+
   async openModal() {
     const modal = await this.modalCtrl.create({
-      component: DialogComponent
+      component: DialogComponent,
     });
 
     await modal.present();
@@ -38,7 +53,7 @@ export class OverlayControllersComponent {
   async openPopover(ev: MouseEvent) {
     const popover = await this.popoverCtrl.create({
       component: DialogComponent,
-      event: ev
+      event: ev,
     });
 
     await popover.present();
@@ -50,5 +65,4 @@ export class OverlayControllersComponent {
   template: '<div class="ion-padding">Dialog Content</div>',
   standalone: true,
 })
-class DialogComponent {
-}
+class DialogComponent {}