Ionic is not defined when using ionic-push

Devniz · December 23, 2015, 6:58pm

Hi all,

I’m trying to use ionic-push-notification feature. I am carefully following the push from Scratch tutorial that you can find here: http://docs.ionic.io/docs/push-from-scratch

I always get the same error: Ionic is not defined, when I’m implementing this piece of code to register to the Push:

`.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
var push = new Ionic.Push({
“debug”: true
});

push.register(function(token) {
console.log(“Device token:”,token.token);
});`

Thanks if someone can help me.

kov_lxrumba47 · January 4, 2016, 9:24am

o God, i wasted like 1 day already for this and still have no solution. Any body help him which will inturn help everybody

Devniz · January 4, 2016, 10:14am

Hi kov_lxrumba47, I finally gave up with this error and start to use this plugin for Push Notification: https://github.com/phonegap/phonegap-plugin-push

Since everything works like a charm!

kov_lxrumba47 · January 4, 2016, 10:24am

can you help with a simple code snippet of working with this plugin. I am new to ionic and any help would be appreciated. THanks.

Devniz · January 4, 2016, 10:38am

This is for an Android device, please search for iOS, it should be quite similar to this:

You need first to make sure that you follow the instructions here to install the Push Notification plugin: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md (Update your SDK tool to have all the required Library if you use Android).
Create a new App in the Google Developer Console and Enable the Cloud Messaging API for Android as well.
This is what I have in my app.js right after the $ionicPlatform.ready():

`//Push Notification System.
var push = PushNotification.init({
android: {
senderID: “yourAppIdFromTheGoogleDeveloperConsole”
},
windows: {}
});

PushNotification.hasPermission(function(data) {
if (data.isEnabled) {
alert(‘isEnabled’);
}
});

push.on(‘registration’, function(data) {
alert(data.registrationId); //You will need this register Id to push on the server-side.
});

push.on(‘notification’, function(data) {
alert(data.message),
alert(data.title),
alert(data.count),
alert(data.sound),
alert(data.image),
alert(data.additionalData)
});

push.on(‘error’, function(e) {
alert(e.message);
});`

Make sure that you have the push.js file injected in your index.html.
And use this PHP code to test your push and see the notification on your emulator/device:
http://pastie.org/10669174

Have fun! ;D

kov_lxrumba47 · January 4, 2016, 10:59am

thank you so much for the reply but, i keep getting error as unCaught ReferenceError:module is not defined in push.js line220.

Devniz · January 4, 2016, 11:02am

Make sure that you also have cordova.js in your index.html and ngCordova provider in your app.js. Also you need to test on a real device or emulator, not the browser because it will trigger a 404 error for cordova.js file.

kov_lxrumba47 · January 4, 2016, 11:10am

I have had already included the dependency of ngCordova in the app.js and running the code on the emulator but it shows the refrenceerror with the module in push.js.

Devniz · January 4, 2016, 11:14am

Ok, If you are using Android, do you have all those dependencies setup in your SDK? :

Android Support Library version 23 or greater
Android Support Repository version 20 or greater
Google Play Services version 27 or greater
Google Repository version 22 or greater

Also look at the line 220 of push.js file and see witch module is missing.

kov_lxrumba47 · January 4, 2016, 11:19am

I have the above lists and the module is used in the line 220 only, and the only place where the error is being thrown.
module.exports = {
/**
* Register for Push Notifications.
*
* This method will instantiate a new copy of the PushNotification object
* and start the registration process.
*
* @param {Object} options
* @return {PushNotification} instance
*/

init: function(options) {
    return new PushNotification(options);
},

hasPermission: function(successCallback, errorCallback) {
    exec(successCallback, errorCallback, 'PushNotification', 'hasPermission', []);
},

/**
 * PushNotification Object.
 *
 * Expose the PushNotification object for direct use
 * and testing. Typically, you should use the
 * .init helper method.
 */

PushNotification: PushNotification

};

Devniz · January 4, 2016, 11:28am

Type in your browser console > PushNotification and see if it is properly indexed.

Also it will be faster if you paste here your app.js!

kov_lxrumba47 · January 4, 2016, 11:31am

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires’
angular.module(‘starter’, [‘ionic’,‘ngCordova’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
var push = PushNotification.init({
android: {
senderID: “18557130855”
},
ios: {
alert: “true”,
badge: “true”,
sound: “true”
},
windows: {}
});

PushNotification.hasPermission(function(data) {
if (data.isEnabled) {
alert(‘isEnabled’);
}
});

push.on(‘registration’, function(data) {
alert(data.registrationId); //You will need this register Id to push on the server-side.
});

push.on(‘notification’, function(data) {
alert(data.message),
alert(data.title),
alert(data.count),
alert(data.sound),
alert(data.image),
alert(data.additionalData)
});

push.on(‘error’, function(e) {
alert(e.message);
});
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})

Thankyou so much for your time.

Devniz · January 4, 2016, 11:36am

Hmm … the code looks fine, can I see your package.json?

kov_lxrumba47 · January 4, 2016, 11:37am

{
“name”: “unhappy”,
“version”: “1.1.1”,
“description”: “UnHappy: An Ionic project”,
“dependencies”: {
“gulp”: “^3.5.6”,
“gulp-sass”: “^2.0.4”,
“gulp-concat”: “^2.2.0”,
“gulp-minify-css”: “^0.3.0”,
“gulp-rename”: “^1.2.0”
},
“devDependencies”: {
“bower”: “^1.3.3”,
“gulp-util”: “^2.2.14”,
“shelljs”: “^0.3.0”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [
“android”
]
}

Devniz · January 4, 2016, 11:40am

Rigth, I can’t see the push-plugin installed in your environment:

ionic plugin add phonegap-plugin-push

It should be visible in your package.json like that:

"cordovaPlugins": [ "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "cordova-plugin-keyboard", "org.apache.cordova.file", "cordova-plugin-file-transfer", "cordova-plugin-media", { "locator": "https://github.com/phonegap/phonegap-plugin-push", "id": "phonegap-plugin-push" }

Then do: ionic state restore.

After that everything should be fine really.

kov_lxrumba47 · January 4, 2016, 11:45am

sad but it still doesnt work. I did the above the plugin appears in package but it still shows the module missing. I am sorry to have wasted your time.
{
“name”: “unhappy”,
“version”: “1.1.1”,
“description”: “UnHappy: An Ionic project”,
“dependencies”: {
“gulp”: “^3.5.6”,
“gulp-sass”: “^2.0.4”,
“gulp-concat”: “^2.2.0”,
“gulp-minify-css”: “^0.3.0”,
“gulp-rename”: “^1.2.0”
},
“devDependencies”: {
“bower”: “^1.3.3”,
“gulp-util”: “^2.2.14”,
“shelljs”: “^0.3.0”
},
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”,
“phonegap-plugin-push”
],
“cordovaPlatforms”: [
“android”
]
}

Devniz · January 4, 2016, 11:49am

But where is this line:

"locator": "https://github.com/phonegap/phonegap-plugin-push",

Try the other command to setup properly the plugin:

cordova plugin add https://github.com/phonegap/phonegap-plugin-push

Again, hit in your browser console PushNotification and see what’s happen, you’re close!

kov_lxrumba47 · January 4, 2016, 12:05pm

I don’t know i tried with a fresh project and still no avail, the plugins doesn’t get like that in my package.json. Maybe i am having error on gitpart. Anyway thankyou so much for your effort and help. You helped a lot to a noob stranger. I may come in handy at certain times. You can add me at rumba.alex47@gmail.com. Thankyou so much for your help.

Devniz · January 4, 2016, 12:28pm

No worries, One last thing to check, are you sure that your push.js file is included right after cordova.js in your index.html template? You can also use my package.json and do ionic state reset and see if you have any luck.

kov_lxrumba47 · January 5, 2016, 3:04am

I just want device taken rest i will be doing on .net. And, i have tried ngCordova which has problem with the event call back and the ionic.io which is having problem with the ionic not being defined. hahahhahaha. Neway, thankyou once again for being of so much help.

Topic		Replies	Views
Push not defined, PushNotification not defined, Ionic not defined.. What's happening?	0	1056	March 7, 2016
Ionic Push is not working after updating ionic 2.0 ionic-v1	0	734	April 21, 2016
Push notification : Uncaught ReferenceError: PushNotification is not defined ionic-v1	2	5263	May 4, 2017
Ionic push notifications with phonegap doesn't work Ionic Native	1	639	July 19, 2021
Ionic Push Register function ionic-v1	3	1634	August 12, 2016

Ionic is not defined when using ionic-push

Related topics