Loading controller is not working

Ionic Framework ionic-v3
1

I have below code in my app, which i got from ionic2 website but its not working. i don’t see any loader.

  let loading = this.LoadingCtrl.create({
            content: 'Please wait...'
        });
        loading.present();
        setTimeout(function () {
            loading.dismiss();
        }, 5000);

Ionic Info:
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.44
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.10.0
Xcode version: Not installed

2

First: You shoul definitely update both your Ionic CLI and Ionic Framework. Also App Scripts… Maybe start new and add your existing code?

Are you getting any errors?
Did you add the LoadingCtrl to your constructor?

3

If you use pre-v3 of ionic-native then your code should look like this:
import {LoadingController} from 'ionic-native';
…
constructor(private loadingCtrl: LoadingController) {}
…

let loading = this.loadingCtrl.create({
  content: 'Please wait...'
});
loading.present();
setTimeout(function () {
  loading.dismiss();
}, 5000);
4

Mine is a huge app, anyother fix rather then updating ionic cli and app scripts?

5

Lots of bugfixes and performance improvements in the newer app scripts. That seems more critical to me than updating the framework. If you update to the final version of Framework 2, and the latest app-scripts, you probably won’t have many breaking changes. On the other hand, when I moved from Framework 2 to 3, it took me almost a full day to get all the NgModules how I wanted them. So that sounds like something you’d want to avoid.

1 Like
6

Does your code look like my example? If not, how do you import it and add it to your constructor?

7

its exactly like what you did

8

Create this Page, put it into your app.module.ts and navigate to it. Then click the button “Publish Loading”.

import { Loading, LoadingController } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-loading',
  template: '<button ion-button (click)="publishLoading()">Publish Loading</button>',
})
export class LoadingPage {
  loading: Loading;
  constructor(private loadingCtrl: LoadingController){
    this.loading = loadingCtrl.create({
      content: 'Loading...'
    });
  }
  publishLoading() {
    this.loading.present();
      setTimeout(() => {
        this.loading.dismiss();
    }, 5000);
  }
}

If it shows a loading, then your code has an error. If it does not, then maybe its your project setting.