Push Notifications in Ionic 2 using Azure Mobile Apps and Azure Notification Hubs

Ionic Framework ionic-v3
1

Before I write about my problem in Ionic 2, I just want say upfront that I have implemented this Push Notification successfully in a regular HTML/JavaScript/Cordova application with Azure Mobile Apps and Azure Notification Hubs.

Now for Ionic 2, I am developing an Ionic 2 app and implementing Push Notification functionality. In my Azure portal login, I have successfully created a Mobile Apps Backend and a Notification Hub. I have connected both of them as well.

On the client side (my Ionic 2 app), I have added plugin “cordova-plugin-ms-azure-mobile-apps” using the command:

ionic plugin add cordova-plugin-ms-azure-mobile-apps --save

This adds a entry in my config.xml.

And in my code I am able to get hold of “WindowsAzure” in import statement and I have the following statement to connect to my Azure Mobile Apps backend:

this.pushClient = new WindowsAzure.MobileServiceClient(‘http://mymobileapp.azurewebsites.net’);

Then, I have a function to register the device at an appropriate time (in ionViewDidLoad method) in which I have:

this.pushClient.push.register(‘gcm’, handle, { “mytemplate”: { “body”: { “data”: { “message”: “{$(messageParam)}” } } } });

Now, when I run “ionic serve” command to run my app in browser window on my laptop (not on the phone yet) I get the following error:

Runtime Error
Cannot find module “cordova-plugin-ms-azure-mobile-apps”

The stack is:

Error: Cannot find module "cordova-plugin-ms-azure-mobile-apps"
    at Object.<anonymous> (http://localhost:8100/build/main.js:114800:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:29990:72)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:114542:79)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:29966:82)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:114262:71)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

I have looked around a lot to get some pointers but nothing is available. :frowning:

Any idea on why this is happening? How I can fix this?

Thanks for the much needed help!