fix(angular): overlays are defined when using standalone controllers (#…

…28560)

Issue number: resolves #28385

---------

<!-- 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?
<!-- Please describe the current behavior that you are modifying. -->

Overlay controllers do not register their respective overlays
components. This results in the overlay not appearing.

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

- Each standalone overlay controller manually calls
`defineCustomElement` for their respective overlay component to ensure
the component is loaded/registered.

## 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. -->


Dev build: `7.5.6-dev.11700492285.1581ed02`

packages/angular/standalone/src/providers/action-sheet-controller.ts

@@ -2,12 +2,14 @@ import { Injectable } from '@angular/core';
 import { OverlayBaseController } from '@ionic/angular/common';
 import type { ActionSheetOptions } from '@ionic/core/components';
 import { actionSheetController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
   constructor() {
     super(actionSheetController);
+    defineCustomElement();
   }
 }

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

@@ -2,12 +2,14 @@ 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 { defineCustomElement } from '@ionic/core/components/ion-alert.js';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
   constructor() {
     super(alertController);
+    defineCustomElement();
   }
 }

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

@@ -10,8 +10,6 @@ import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
   constructor() {
     super(loadingController);
-
-    // TODO: FW-5415 may remove the need for this
     defineCustomElement();
   }
 }

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

@@ -2,6 +2,7 @@ import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
 import type { ModalOptions } from '@ionic/core/components';
 import { modalController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
 @Injectable()
 export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
@@ -11,6 +12,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
 
   constructor() {
     super(modalController);
+    defineCustomElement();
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {

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

@@ -10,8 +10,6 @@ import { defineCustomElement } from '@ionic/core/components/ion-picker.js';
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
   constructor() {
     super(pickerController);
-
-    // TODO: FW-5415 may remove the need for this
     defineCustomElement();
   }
 }

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

@@ -2,6 +2,7 @@ import { Injector, inject, EnvironmentInjector } from '@angular/core';
 import { AngularDelegate, OverlayBaseController } from '@ionic/angular/common';
 import type { PopoverOptions } from '@ionic/core/components';
 import { popoverController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
 
 export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
   private angularDelegate = inject(AngularDelegate);
@@ -10,6 +11,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
 
   constructor() {
     super(popoverController);
+    defineCustomElement();
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {

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

@@ -2,12 +2,14 @@ import { Injectable } from '@angular/core';
 import { OverlayBaseController } from '@ionic/angular/common';
 import type { ToastOptions } from '@ionic/core/components';
 import { toastController } from '@ionic/core/components';
+import { defineCustomElement } from '@ionic/core/components/ion-toast.js';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
   constructor() {
     super(toastController);
+    defineCustomElement();
   }
 }