TypeError: Cannot read property 'dismiss' of undefined

Ionic Framework
1

Hi everyone!
I have implemented a service with two methods for creating and closing a loading controller, like this.

async presentLoading(message: string = '') {
    this.loading = await this.loadingCtrl.create({
      message: message
    });
    await this.loading.present();
  }

  async dismissLoading() {
    console.log(this.loading);
    await this.loading.dismiss();
  }

I call the presentLoading method before an api call and dismissLoading after recieved the data back. It works fine, but if I refresh the browser it prints this error in the console:

core.js:15713 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined
TypeError: Cannot read property 'dismiss' of undefined
    at HelpersService.<anonymous> (helpers.service.ts:25)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new ZoneAwarePromise (zone.js:910)
    at Module.__awaiter (tslib.es6.js:67)
    at HelpersService.push../src/services/helpers.service.ts.HelpersService.dismissLoading (helpers.service.ts:23)
    at SafeSubscriber._next (edit.page.ts:46)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at HelpersService.<anonymous> (helpers.service.ts:25)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at tslib.es6.js:71
    at new ZoneAwarePromise (zone.js:910)
    at Module.__awaiter (tslib.es6.js:67)
    at HelpersService.push../src/services/helpers.service.ts.HelpersService.dismissLoading (helpers.service.ts:23)
    at SafeSubscriber._next (edit.page.ts:46)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at resolvePromise (zone.js:831)
    at new ZoneAwarePromise (zone.js:913)
    at Module.__awaiter (tslib.es6.js:67)
    at HelpersService.push../src/services/helpers.service.ts.HelpersService.dismissLoading (helpers.service.ts:23)
    at SafeSubscriber._next (edit.page.ts:46)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
2

The problems seems to be the Loading Controller” dismiss() is called before present() and thats’s why it keeps the spinner without dismissing and says is undefined.

I found a solution here. Hope it helps somebody.
Happy coding!

1 Like