core.js:9110 ERROR Typeerror: Cannot read Property 'onDidDismiss' of Undefined

Question

When I log in to an Ionic4 system Loading is called on the screen however, the same Dismiss is giving the error:

core.js:9110 ERROR TypeError: Cannot read property 'onDidDismiss' of undefined

It follows below the module in which I call the Loagin Service:

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AlertController } from '@ionic/angular';
import { LoadingController } from '@ionic/angular';

import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { LoadingService } from '../services/loading.service';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private authService: AuthService,
              private router: Router, private alertController: AlertController,
              private loginLoading: LoadingService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
    });
  }

  login() {
    const email = this.form.get('email').value;
    const password = this.form.get('password').value;

    this.loginLoading.presentLoading();

    this.authService.login(email, password).subscribe(
      (datas: any) => {
       this.loginLoading.loading.onDidDismiss();
       this.router.navigate(['home']);
      },
      erro => {
        this.loginLoading.loading.onDidDismiss();

        this.presentAlert();
      }
    );
  }

I do the loginLoading import this with the following structure:

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  public loading: any;

  constructor(public loadingCtrl: LoadingController) {
    console.log('Hello LoadingProvider Provider');
  }

  async presentLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Conectando...',
    });
    await loading.present();
    console.log('Loading dismissed!');
  }
}

The loginLoading import is being done in the application module

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LoadingService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Authservice for the login

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { TokenService } from './token.service';


const API = 'http://localhost:8000/api';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient, private tokenService: TokenService) { }

  login(email: string, password: string) {
    return this.http.post(API + '/login', { email, password }, { observe: 'response' }).pipe(tap((res: any) => {
      this.tokenService.setToken(res.body.acces_token);
    }));
  }
}

Analyzing the code, someone would know the cause of this possible error?

Answer 1

You must return the loading on your service!

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  public loading: any;

  constructor(public loadingCtrl: LoadingController) {
    console.log('Hello LoadingProvider Provider');
  }

  async presentLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Conectando...',
    });
    await loading.present();
    return loading;
  }
}