Reputation: 2370
I have an Ionic3 application which posts data to an API based on an action, whilst waiting for the action to complete I show a loader using Ionic's LoadingController.
import { LoadingController } from 'ionic-angular';
I declare the loader by:
this.loader = this.loadingCtrl.create({
content: "Please wait..."
});
I then use the loader:
doSomething(item) {
this.loader.present().then(()=>{
this.item.begin(item).then((result) => {
this.data = result;
this.loader.dismiss();
}, (error) => {
console.log(error);
this.loader.dismiss();
});
});
}
I get the error:
ERROR Error: Uncaught (in promise): inserted view was already destroyed
Can someone point me in the right direction?
Environment:
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.10.2
ionic (Ionic CLI) : 3.10.3
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.6.1
System:
ios-deploy : 1.9.2
Node : v7.7.1
npm : 4.1.2
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Upvotes: 0
Views: 883
Reputation: 2202
Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.
So your error it's because you have the create and present split.
import { LoadingController } from 'ionic-angular';
constructor(public loadingCtrl: LoadingController) { }
presentLoadingDefault() {
const loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
setTimeout(() => {
loading.dismiss();
}, 5000);
}
Upvotes: 1