Cannot find name 'Toast'

Ionic Framework ionic-v3
#1

Hello, I am new to ionic, and currently i am learning to use ionic 2 to create Android mobile apps.
I tried to implement native Android toast message on my app.
My app supposed to toast a message after mysqli query has been executed and data.status return ‘200’.
I followed the example on this page https://ionicframework.com/docs/native/toast/
However, i keep on getting error which reads "Cannot find name ‘Toast’"
I have already:

  1. executed ‘ionic platform add android’
  2. executed ‘cordova plugin add cordova-plugin-x-toast’ -> returns Plugin “cordova-plugin-x-toast” already installed on android.
  3. added import { Toast } from ‘@ionic-native/toast’; to the page .ts file

i got the error on my constructor:

constructor(private navCtrl: NavController, private navParams: NavParams, private alertCtrl: AlertController, private http: Http, private platform: Platform, private toast: Toast)
{

}

Did i miss anything?

#2

Did you run npm install --save @ionic-native/toast ??

#3

Thanks for the reply,
Nope, sorry, i overlooked that command,
After executing this command, is there any other things need to be done?
The error is no longer there, however i got an exception saying :
EXCEPTION: Error in ./MyApp class MyApp - inline template:9:6 caused by: No provider for Toast!

#4

I solved this error after adding:
providers: [Toast] to my @component,
How do i test this app of mine?, because the toast doesn’t seem to work by running ionic serve command

#5

99% of the time, this is a mistake. Almost always you want to declare providers in your AppModule. The only time you want to declare them in components is when you want a separate instance of the provider per component.

Cordova plugins generally don’t work under ionic serve. Can you just use ionic’s ToastController instead? It works both in browsers and on device.

#6

Thank you for the kind reply and advice

I have already followed your advice,
I have another question by the way,
Where do i import ToastController?
I assume i have to add something like:
import {ToastController} from ‘somewhere’;

#7

“somewhere” is “ionic-angular”, and if your IDE doesn’t help figure that out for you, perhaps you need to kick it to the curb.