CODEWITHSUNDEEP
angularjscordovaionic-frameworktoast
Saadia
Saadia

Reputation: 856

Unable to show Toast message using Ionicframework

I am extremely new to the world of mobile development and I am working with ionic framework.

All I am trying to do is to display a toast message to the user by following this tutorial and so far I am just going crazy trying to implement it.

The error I get is as following

Cannot read property 'toast' of undefined

  1. I have installed cordova
  2. I have installed the Toast plugin

inside my index.html I have added the script of ng-cordova.min.js

  <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

Do i need to add the Toast.js file in index.html too? If yes then that does not help either and leads to another error.

This is my controller

  .controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {

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

What am i missing here?

I will really appreciate any help.

UPDATE

After making changes, suggested by @Del, the following error appears

ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
    at ionic.bundle.js:13380
    at ionic.bundle.js:17574
    at Object.getService [as get] (ionic.bundle.js:17721)
    at ionic.bundle.js:17579
    at getService (ionic.bundle.js:17721)
    at invoke (ionic.bundle.js:17753)
    at Object.instantiate (ionic.bundle.js:17770)
    at ionic.bundle.js:22326
    at self.appendViewElement (ionic.bundle.js:56883)
    at Object.switcher.render (ionic.bundle.js:54995)

Upvotes: 1

Views: 7313

Answers (5)

Msmkt
Msmkt

Reputation: 1611

For the record: For Ionic v2/v3

  1. Install dependencies
  2. Include it in ionic project
  3. How to use it.

1. Install dependencies

Within CLI run below commands:

$ ionic cordova plugin add cordova-plugin-x-toast

$ npm install --save @ionic-native/toast

2. Include it in ionic project

1.Add below to app.module.ts

import { Toast } from '@ionic-native/toast';

....and to @NgModule section providers:[ HERE,]

2.Each page where you want to use Toast you need to add:

import { Toast } from '@ionic-native/toast';

....also add to constructor

constructor(private toast: Toast, ...){}

...now you can use it as below example:

this.toast.show('message', 'duration', 'position').subscribe();

...or sending message to console:

this.toast.show('message', 'duration', 'position').subscribe(
  toast=>{
    console.log(toast);
  }
);

Upvotes: 0

rajatksud
rajatksud

Reputation: 31

This error will not go away on the real device as well unless you inject the dependency for $cordovaToast. You may use or may remove $cordovaToast in the controller and it will not affect the working. It is good practice to keep dependencies. The crucial step which is missing in all the responses is to introduce DI for ngCordova in the module to which UsersControllers belongs. The example highlighted by JSalaat has this controller

foodShop.controller('cartController', function($scope, cartFactory, $cordovaToast)

and the foodshop module has injected ngCordova.

var foodShop = angular.module('foodShop', ['ionic','firebase','ngCordova'])

As the plug-in belong to ngCordova it does not need to be introduced separately in the controller. This explains why there is no error in that application.

in your case try the app instance creation could look like

var app = angular.module('app', ['ionic','ngCordova'])

if not you will continue to have the Unknown provider: $cordovaToastProvider error

Upvotes: 0

John smith
John smith

Reputation: 1785

I am also new in ionic but I have little knowledge about android so then I found the way how to use android functions in ionic means I found the way to create own plugins from here.

so after following steps from the given link I have created an own plugin you can see it ionic plug @ github.

you need to follow simple 4 steps mentioned at git link.

hopefully, it will help you to sort out the same problem.

Upvotes: 0

M. Junaid Salaat
M. Junaid Salaat

Reputation: 3783

You are trying to run $cordovaToast on browser. It will not work because it is a native plugin. Please use it on a real device or emulator.

Upvotes: 3

V&#237;ctor
V&#237;ctor

Reputation: 3039

If the plugin is correctly installed, I have used it without using $cordovaToast

.controller('UsersController', ['$scope', '$http', function ($scope, $http) {

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

You dont have to add the ng-cordova or toast.js.

If you add the plugin (ionic plugin add ...), remove the platform, add again, and build, it should work

Upvotes: 5

Related Questions