v4: Error while trying to use LoadingController

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);
    }

1. 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:

[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!

[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();
       });
   });
}