Ionic LoadingController (Ionic 8, Angular 17) error: undefined is not an object (evaluating 'r.loadingOverlay.message="Logging in"')

Ionic Framework Ionic Angular
1

I’m encountering an error in my browser console: TypeError: undefined is not an object (evaluating 'r.loadingOverlay.message="Logging in"'), while attempting to configure Ionic’s LoadingController. Any assistance in resolving this issue would be greatly appreciated. Thank you in advance.

I’m encountering this issue while utilizing Ionic’s LoadingController within my component. Below is the snippet from the login.page.ts file:

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { LoadingController, ToastController } from '@ionic/angular';
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCol,
  IonContent,
  IonGrid,
  IonHeader,
  IonIcon,
  IonInput,
  IonItem,
  IonList,
  IonNav,
  IonRow,
  IonText,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { arrowForwardCircleOutline } from 'ionicons/icons';
import { ContainerComponent } from 'src/app/components/container/container.component';
import { AuthResponse, AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  standalone: true,
  imports: [
    IonIcon,
    IonButton,
    IonCard,
    IonCardContent,
    IonCol,
    IonContent,
    IonGrid,
    IonHeader,
    IonInput,
    IonItem,
    IonList,
    IonNav,
    IonRow,
    IonTitle,
    IonText,
    IonToolbar,
    ContainerComponent,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
})
export class LoginPage implements OnInit {
  form!: FormGroup;
  disabled: boolean = true;
  _loadingOverlay!: HTMLIonLoadingElement;
  _errorToast!: HTMLIonToastElement;

  constructor(
    private _titleService: Title,
    private _router: Router,
    private _formBuilder: FormBuilder,
    private _loadingController: LoadingController,
    private _toastController: ToastController,
    private _authService: AuthService
  ) {
    addIcons({ arrowForwardCircleOutline });

    this._titleService.setTitle('Login');
  }

  async ngOnInit(): Promise<void> {
    this._initForm();
    this._subscribeToFormChanges();
    await this._setOrResetLoadingOverlay();
    await this._setOrResetToasts();
  }

  private async _setOrResetToasts(): Promise<void> {
    this._errorToast = await this._toastController.create({
      duration: 1500,
      position: 'bottom',
    });
  }

  private async _setOrResetLoadingOverlay(): Promise<void> {
    this._loadingOverlay = await this._loadingController.create({});
  }

  private _initForm(): void {
    this.form = this._formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
  }

  private _subscribeToFormChanges(): void {
    this.form.statusChanges.subscribe((status) => {
      if (status === 'VALID') {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    });
  }

  public async authenticate(): Promise<void> {
    this._loadingOverlay.message = 'Logging in';
    await this._loadingOverlay.present();

    this._authService
      .authenticate({
        username: this.form.value.username,
        password: this.form.value.password,
      })
      .subscribe({
        next: async (response: AuthResponse) => {
          await this._loadingOverlay.dismiss();

          try {
            await this._authService.processPostLoginOps(response.auth_token);

            this._router.navigate(['/']).then(() => window.location.reload());
          } catch (error) {
            this._loadingOverlay.dismiss();
            await this._setOrResetLoadingOverlay();

            this._errorToast.dismiss();
            await this._setOrResetToasts();

            this._errorToast.message = 'Unable to login';
            this._errorToast.present();
          }
        },
        error: async (error: any) => {
          this._loadingOverlay.dismiss();
          await this._setOrResetLoadingOverlay();

          this._errorToast.dismiss();
          await this._setOrResetToasts();

          this._errorToast.message = 'Unable to login';
          this._errorToast.present();
        },
      });
  }

  public onboard(): void {
    this._router.navigate(['/onboard']);
  }
}

While running the application using the command ionic cap run ios -l --external, the functionality operates as expected. However, upon building the application with the command ionic cap build ios -l --external, the loading overlay fails to appear upon pressing the login button. This issue arises on both simulator and physical devices alike.

Upon employing Safari’s WebInspector to inspect the logs, I encountered the following error: TypeError: undefined is not an object (evaluating 'r.loadingOverlay.message="Logging in"').