"Cannot read property 'toast' of undefined", $cordovaToast, ngCordova

Working on extending the functionality of the ionic-todo tutorial, am trying to implement Toast notifications into the application.

I am getting this error when I run the $cordovaToast. Cannot read property toast of undefined. I’ve defined $cordovaToast in the controller, and it even shows the .show() as a function when I hover over it in dev tools…

https://github.com/awitherow/ionic-todo/blob/master/www/js/app.js#L72-L78

ngCordova is defined, do I need to define anything else in the module?.

https://github.com/awitherow/ionic-todo/blob/master/www/js/app.js#L6-L6

This line is an example call of the $scope.ToastMeBaby()

https://github.com/awitherow/ionic-todo/blob/master/www/js/app.js#L99-L104

Here is my HTML where I’ve defined the scripts and plugin for Toast.js
https://github.com/awitherow/ionic-todo/blob/master/www/index.html#L130-L131

What am I doing wrong? It won’t show up on the web view from ionic serve, nor from the ionic upload test on my Android phone.

Thanks <3

1 Like

Have you add this plugin to your project?

This error usually means that plugin don’t exist and ngCordova can’t find anything to reference to.

@Gajotres, thanks for the reply man!

Yeah I ran through the install documents http://ngcordova.com/docs/install/

As well as the install documents for the specific plugin http://ngcordova.com/docs/plugins/toast/

My folder structure looks so.

ionic-todo
…plugins
…cordova-plugin-x-toast
…files
…www
…js
…app.js
…lib
…ngCordova
…files

I’m sure I did something wrong though. Any ideas? I’m looking at my config file and it doesn’t have any of the configs set as features, which I thought would automatically occur with. Problem still occurs when I manually add the stuff from the below link too.

$ cordova plugin add GitHub - EddyVerbruggen/Toast-PhoneGap-Plugin: 🍻 A Toast popup plugin for your fancy Cordova app

EDIT

Reading through the basic install docs http://ngcordova.com/docs/install/

How do I initalize the plugin? I think I have left that part out.

$cordovaPlugin.Toast().then(success, error);

or something more like

cordova.plugins.Toast().then(success, error);

You may try one other thing.

Remove plugin from your project and add it again.

Plugin must work without any kind of initialization: http://www.gajotres.net/how-to-show-different-native-modal-windows-in-ionic-framework/

$scope.showToast = function() {     
    $cordovaToast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
            console.log('Success');
        }, function (error) {
            console.log('Error');
        });
};

Honestly, still does not work. I reinstalled the plugin 3 times into my folder, deleted it every time beforehand.

The only difference I see between what I am doing and what you’re doing on your app in the link you sent me, is that I don’t have all of the things in my controller wrapped in a eventlistener for when device is ready.

Have you tried using it in a device ready state?

Did you try it on your phone? cordovaToast works only in the real device.

3 Likes

@azurikai Did you resolve the issue ? I am getting the same issue with both toast and file-opener. Cant seem to find the issue.

@azurikai, @Gajotres Solution this solution worked for me

I got same error when doing ionic serve --lab. But when I deployed it on real device, it worked great!

I ended up using the non-native ‘toast’: https://github.com/rajeshwarpatlolla/ionic-toast

Considering that I need it to work in the normal (desktop+mobile) browsers, it turned out to be the most straightforward solution.

1 Like

$ionicPlatform.ready(function() {
$cordovaToast.show(“msg”, ‘short’, ‘center’);
});

checking the device ready worked for me

1 Like