refactor(angular): loading controller uses correct core instance

packages/angular/common/src/index.ts

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

packages/angular/src/index.ts

@@ -20,7 +20,6 @@ export * from './directives/validators';
 
 // PROVIDERS
 export {
-  LoadingController,
   DomController,
   NavController,
   Config,
@@ -37,6 +36,7 @@ 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';
+export { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { ModalController } from './providers/modal-controller';
 export { PickerController } from './providers/picker-controller';

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

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

packages/angular/standalone/src/index.ts

@@ -9,13 +9,13 @@ 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 { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { ModalController } from './providers/modal-controller';
 export { PickerController } from './providers/picker-controller';
 export { PopoverController } from './providers/popover-controller';
 export { ToastController } from './providers/toast-controller';
 export {
-  LoadingController,
   DomController,
   NavController,
   Config,

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

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
+import { OverlayBaseController } from '@ionic/angular/common';
 import type { LoadingOptions } from '@ionic/core/components';
 import { loadingController } from '@ionic/core/components';
-
-import { OverlayBaseController } from '../utils/overlay';
+import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
 
 @Injectable({
   providedIn: 'root',
 })
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
   constructor() {
     super(loadingController);
+
+    // TODO: FW-5415 may remove the need for this
+    defineCustomElement();
   }
 }

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

@@ -46,6 +46,12 @@ describe('Providers', () => {
     cy.get('ion-alert').should('be.visible');
   });
 
+  it('should open a loading-indicator', () => {
+    cy.get('button#open-loading').click();
+
+    cy.get('ion-loading').should('be.visible');
+  });
+
   it('should open a picker', () => {
     cy.get('button#open-picker').click();
 

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

@@ -9,6 +9,12 @@ describe('Overlay Controllers', () => {
     cy.get('ion-alert').should('be.visible');
   });
 
+  it('should present a loading indicator', () => {
+    cy.get('button#open-loading').click();
+
+    cy.get('ion-loading').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

@@ -47,5 +47,6 @@
   <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-loading" (click)="openLoading()">Open Loading Indicator</button>
   <button id="open-picker" (click)="openPicker()">Open Picker</button>
 </ion-content>

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

@@ -34,7 +34,7 @@ export class ProvidersComponent {
   constructor(
     private actionSheetCtrl: ActionSheetController,
     private alertCtrl: AlertController,
-    loadingCtrl: LoadingController,
+    private loadingCtrl: LoadingController,
     private menuCtrl: MenuController,
     private pickerCtrl: PickerController,
     modalCtrl: ModalController,
@@ -129,6 +129,15 @@ export class ProvidersComponent {
     await alert.present();
   }
 
+  async openLoading() {
+    const loading = await this.loadingCtrl.create({
+      message: 'Loading...',
+      duration: 2000,
+    });
+
+    await loading.present();
+  }
+
   async openPicker() {
     const picker = await this.pickerCtrl.create({
       columns: [],

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

@@ -1,5 +1,6 @@
 <div>
   <button id="open-alert" (click)="openAlert()">Open Alert</button>
+  <button id="open-loading" (click)="openLoading()">Open Loading Indicator</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,11 @@
 import { Component } from '@angular/core';
-import { AlertController, ModalController, PickerController, PopoverController } from '@ionic/angular/standalone';
+import {
+  AlertController,
+  LoadingController,
+  ModalController,
+  PickerController,
+  PopoverController,
+} from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-overlay-controllers',
@@ -9,6 +15,7 @@ import { AlertController, ModalController, PickerController, PopoverController }
 export class OverlayControllersComponent {
   constructor(
     private alertCtrl: AlertController,
+    private loadingCtrl: LoadingController,
     private modalCtrl: ModalController,
     private pickerCtrl: PickerController,
     private popoverCtrl: PopoverController
@@ -28,6 +35,15 @@ export class OverlayControllersComponent {
     await alert.present();
   }
 
+  async openLoading() {
+    const loading = await this.loadingCtrl.create({
+      message: 'Loading...',
+      duration: 2000,
+    });
+
+    await loading.present();
+  }
+
   async openModal() {
     const modal = await this.modalCtrl.create({
       component: DialogComponent,