v4: Error while trying to use LoadingController

[devner007]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.11 (C:\Users\admin\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.11
   @angular-devkit/core       : 0.7.0-rc.2
   @angular-devkit/schematics : 0.7.0-rc.2
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.11
   @ionic/schematics-angular  : 1.0.0-rc.11

System:

   NodeJS : v8.11.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.0.1
   OS     : Windows 10

Describe the Bug
When trying to use the "LoadingController" in a Component or a Service, the loading.present() method and loading.dismiss() method both get underlined in red color. Intellisense reports the following issues:
TS2339: Property 'present' does not exist on type 'Promise<HTMLIonLoadingElement>.'
TS2339: Property 'dismiss' does not exist on type 'Promise<HTMLIonLoadingElement>.'
Because of the above issue, I am unable to use LoadingController/Spinner in my project.

Steps to Reproduce
Steps to reproduce the behavior:

1. In any component or service, import LoadingController like this: import {LoadingController} from '@ionic/angular';
2. Add dependency in the constructor:
   constructor(public loadingCtrl: LoadingController) { }
3. Add the following method to the component/service:

 presentLoadingDefault() {
        let loading = this.loadingCtrl.create({
            content: 'Please wait...'
        });

        loading.present();

        setTimeout(() => {
            loading.dismiss();
        }, 5000);
    }

4. The present() and dismiss() methods in the code above, gets highlighted in red color and Intellisense will show this error:
   TS2339: Property 'present' does not exist on type 'Promise<HTMLIonLoadingElement>.'
TS2339: Property 'dismiss' does not exist on type 'Promise<HTMLIonLoadingElement>.'

Related Code
Unfortunately, I am unable to setup a demo of this issue using Stackblitz. However, I am attaching a screenshots of these issues below.

Expected Behavior
The loading.present(); and loading.dismiss(); should not be highlighted in red i.e. they should not have an error. In the UI, the Loading Spinner should show up normally, whenever the presentLoadingDefault() method is invoked.

Additional Context
Here are the screenshots of the issues:

[peterpeterparker]

In v4 the loadingController(and others like alert etc.) return a promise

You could rewrite your above code like the following (see async/await)

async presentLoadingDefault() {
    let loading = await this.loadingCtrl.create({
        content: 'Please wait...'
    });

    await loading.present();
}

or another example

async presentLoadingDefault() {
    let loading = await this.loadingCtrl.create({
        content: 'Please wait...'
    });

    loading.present().then(() => {
         // Do stuffs
    });
}

[devner007]

Hi Peter,
Thank you for the response. I tried to implement the couple of code blocks that you have given, but I am confused. I am using this to fetch the data from backend. So how do I go about invoking the Loading Controller when I start the operation and close it automatically when the operation is done?

[peterpeterparker]

@devner007 here you go

 async myMethod() {
    const loading = await this.loadingController.create({});
   
  loading.present().then(() => {
       // do your stuffs backend call etc here
       this.yourStuffs().then(() => {
            // Whatever you have still things to do you could do here
            // finally close loading 
            loading.dismiss();
       });
   });
}

[devner007]

@peterpeterparker
Thank you for the response. I tried to integrate your solution in my code and I think I may be couple steps away from achieving the goal. I am trying to invoke a method in my Component. This method will call a Method in my Service. So instead of hard-coding/adding the Loading Controller in every component, I was trying to add the Loading Controller just in the Services file, so that any Component that invokes the method in the Service, will also trigger and show the Spinner.

Here is the code from my Component (the one that calls the Service method):

     queryDb(fieldsObj) {

        this.todoService.readAllTodos(fieldsObj)
            .then(
                response => {

                    console.warn(response);

                    // The above console warn shows the following in console:
                    // Observable {_isScalar: false, source: Observable, operator: FinallyOperator}
                },);        
    }

The above console warn shows the following in console:
Observable {_isScalar: false, source: Observable, operator: FinallyOperator}

How can the above be modified to receive the actual data from the service?

Here is the code from my Service file (the one based on the changes that you mentioned):

 async readAllTodos(fieldsObj: Object) {
        const body = JSON.stringify(fieldsObj);

        // Show Spinner
        const loading = await this.loadingCtrl.create({
            content: 'Please wait...'
        });

        return loading.present().then((res) => {

            return this.http.post<Todo>('http://mywebsite.com/read.php' body, httpOptions)
                .pipe(
                    tap((response) => {
                        return response;
                    }),
                    // Show Error message
                    catchError((errorData) => {
                        return throwError(errorData);
                    }),
                    // Hide the Spinner regardless of the API query Success or Failure
                    finalize(() => {
                            // Hide Spinner irrespective of success or error when the API is called
                            loading.dismiss();
                        }
                    )
                );

        })
    }

Any help is highly appreciated.

[peterpeterparker]

@devner007 first of all I think it's not an Ionic v4 issue, so you should probably open a support request on the Ionic forum, link it here and close this issue (i'll follow)

I'm not sure I understand your question but looking at your 2nd code I just noticed two things

1. Don't use any components in your services, respectively loadingCtrl should not be use in a service but only in your components or pages

2. remove the return of return this.http.post<Todo>

[devner007]

@peterpeterparker
Your Point 1 is the answer that I was looking for. I will make the changes accordingly.

Thank you so much for all your help! Appreciate it!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.