Sweg
March 9, 2020, 9:12pm
1
I am trying to use a Toast Controller in my Ionic 4 app.
When the code tries to compile however, I am getting this error message:
Property ‘present’ does not exist on type ‘Promise’. Did yo
u forget to use ‘await’?
Here is my code:
login(): void {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then((user) => {
this.toastCtrl.create({
message: 'Welcome ' + user.user.displayName,
duration: 3000
}).present();
}).catch((err) => {
console.log(err);
})
}
After seeing this error, I did some research & came up with the following:
async presentAlert() {
const alert = await this.toastCtrl.create({
message: 'User Exists',
duration: 3000
});
await alert.present();
}
login(): void {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then((user) => {
console.log('in here');
this.presentAlert;
}).catch((err) => {
console.log(err);
})
}
Now, “in here” is printed to the console, but the toast is still not appearing.
Can someone please tell me what I’m doing wrong, & how can it be resolved. Thanks a lot!
Seems like you forget to call the method:
login(): void {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then((user) => {
console.log('in here');
this.presentAlert(); // here the BRACKETS()
}).catch((err) => {
console.log(err);
})
}
2 Likes
this.presentAlert
is an expression resolving to a function. this.presentAlert()
actually calls it.
Additionally, I would strongly recommend forgetting async
and await
exist for now.
Sweg
March 10, 2020, 9:19am
4
Thanks a lot for this.
The toast is now displaying, but I’m getting a red line under async presentAlert()
.
This is the error appearing now in VS code when I hover over that line:
An async function or method must return a ‘Promise’. Make sure you have a declaration for ‘Promise’ or include ‘ES2015’ in your --lib
option.
async presentAlert() {
const alert = await this.toastCtrl.create({
message: 'User Exists',
duration: 3000
});
alert.present(); //update
}
Do not use await
in alert.present();
.
Sweg
March 10, 2020, 10:52am
6
Thanks for your response.
I’ve updated my code as follows, & the toast appears as expected:
login(): void {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then((user) => {
this.toastLoginSuccess(user);
}).catch((err) => {
this.toastLoginFail(err);
})
}
async toastLoginSuccess(user) {
const alert = await this.toastCtrl.create({
message: 'Welcome ' + user.user.displayName,
duration: 3000
});
alert.present();
}
async toastLoginFail(err) {
const alert = await this.toastCtrl.create({
message: err.message,
duration: 3000
});
alert.present();
}
However, there is an error under async toastLoginSuccess(user)
& async toastLoginFail(err)
. The error message displayed for both is:
An async function or method must return a ‘Promise’. Make sure you have a declaration for ‘Promise’ or include ‘ES2015’ in your --lib
option.
I guess I’m shouting into the wind here, but I’ll try one more time: if you don’t completely understand what async
and await
do, don’t use them at all. They don’t allow you to do anything that can’t be done with more explicit syntax.
1 Like
Sweg
March 16, 2020, 8:42pm
8
Hi,
If I remove await & async from my code & use something like this:
presentToast() {
const toast = this.toastCtrl.create({
message: 'Your settings have been saved.',
});
toast.present();
}
I get an error on .present()
:
Property ‘present’ does not exist on type ‘Promise’.ts(2339)
It then recommends me to use await & async, how else would I go about doing this?
this.toastCtrl.create({...})
.then(toast => toast.present());
1 Like
Sweg
March 16, 2020, 9:03pm
10
OK, that’s displaying the toast now.
But I’d want to dismiss this toast elsewhere, I’m not sure how I can reference this toast outside of this function
I did it on Ionic 5+
like so:
Return toast
object like so:
async showToast(message: string, color: string, position: any = 'bottom',
duration: number = 5000): Promise<HTMLIonToastElement> {
const toast: HTMLIonToastElement = await this.toastController.create({
message,
duration,
position,
color,
buttons: [
{
text: 'Ok',
handler: () => {
}
}
]
});
toast.present();
return toast;
}