Ionic 4: loading.present is not a function

Question

Ionic 4, getting an error while using the loader loading.present is not a function

Here is my code:

const loading =  this.loadingController.create({
  message: 'Loading',
});

loading.present();

Answer 1

This is because loadingController.create() is an asynchronous method and before you get the instance of HTMLIonLoadingElement in variable loading, you are calling the loading/present() which is undefined for the moment.

So you need to wait until you get the instance of HTMLIonLoadingElement while calling loadingController.create()

How to solve it: Simple use aync/await

const loading = await this.loadingController.create({
  message: 'Loading',
});
loading.present();

See we used await just after the = operator. So it makes sure next line to be executed only when call to loadingController.create is complete and variable loading is initialized.

NOTE: Don't forget to add async keyword to the function inside which you are using the loader code, as we are using await.