I’m not able to create notifications with the $cordovaLocalNotification plugin using IONIC

Question

I tried to do based on the code of this site: https://devdactic.com/local-notifications-ionic/

But when I press the "Add notification" button this error appears:

ionic.bundle.js:26771 ReferenceError: device is not defined
    at Scope.$scope.add (controllers.js:83)
    at fn (eval at <anonymous> (ionic.bundle.js:27615), <anonymous>:4:200)
    at ionic.bundle.js:65290
    at Scope.$eval (ionic.bundle.js:30372)
    at Scope.$apply (ionic.bundle.js:30472)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:65289)
    at defaultHandlerWrapper (ionic.bundle.js:16764)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16752)
    at triggerMouseEvent (ionic.bundle.js:2953)
    at tapClick (ionic.bundle.js:2942)

And when I press the "Is Scheduled" button this error appears:

ionic.bundle.js:26771 TypeError: Cannot read property 'plugins' of undefined
    at Object.isScheduled (ng-cordova.min.js:8)
    at Scope.$scope.isScheduled (controllers.js:97)
    at fn (eval at <anonymous> (ionic.bundle.js:27615), <anonymous>:4:224)
    at ionic.bundle.js:65290
    at Scope.$eval (ionic.bundle.js:30372)
    at Scope.$apply (ionic.bundle.js:30472)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:65289)
    at defaultHandlerWrapper (ionic.bundle.js:16764)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:16752)
    at triggerMouseEvent (ionic.bundle.js:2953)

Searching the Internet I found that Cordova from version 4.0 to use this kind of resource needs Whitelist for safe access to external domains I’m not sure but I still installed this plugin and added in index.html this tag:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *; style-src  &apos;self&apos; &apos;unsafe-inline&apos; *">

and yet it doesn’t work.

The template looks like this:

<ion-content>
    <button class="button" ng-click="add()">Add notification</button>
    <button class="button" ng-click="isScheduled()">Is Scheduled</button>
</ion-content>

Script looked like this:

app.controller('AlarmeCtrl', function ($scope, $cordovaLocalNotification, $ionicPlatform) {

  //Notificações locais do Alarme
  $scope.add = function () {
    var alarmTime = new Date();
    alarmTime.setMinutes(alarmTime.getMinutes() + 1);
    var sound = device.platform == 'Android' ? 'file:C:\Users\knot\Music\I Stand Alone (2014_12_11 04_07_36 UTC).mp3' : 'file://beep.caf';
    $cordovaLocalNotification.add({
      id: "1234",
      date: alarmTime,
      message: "This is a message",
      title: "This is a title",
      autoCancel: true,
      sound: sound,
    }).then(function () {
      console.log("The notification has been set");
    });
  };

Answer 1

The Cordova object is only created when it is tested on a real or emulated device (such as AVD). The same goes for the "device is Undefined", device is a property of the global Window object, which Cordova adds. Run tests by emulating an environment or running directly on a physical device.

If you want to test for Ios, and do not have an iPhone, I advise using the https://app.io/ . In it you can upload your app to a cloud and see it working as if it were on a device

Answer 2

Thanks for the tip from IOS Ziro. I found out that my project was corrupted I believe it was at the time of saved on my external hard drive because instead of deleting the old one to save it again I just overwritten the files. I created a new project and copied the files I had made from the www folder to it and solved the problem.