3rd Party Library “cordova-plugin-ms-azure-mobile-apps” not getting recognized in my Ionic 2 app

Question

After looking everywhere (and going through the past forum topics on all sorts of websites) for the last 2 days and no solution, I am posting here as a last resort. I understand everybody is busy but this is killing me.

I have tried everything possible from creating the app from scratch multiple times to adding one library at a time then run and make sure it's working then add another library and then run the app...

Everything is good until I add "cordova-plugin-ms-azure-mobile-apps" in my app. I am using the following command:

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

This adds an entry to my config.xml.

Then when I try to refer to it for importing "WindowsAzure" class in it into my TypeScript file, the intelisense doesn't give that library as an option as it would give for other libraries (like ionic-native, rxjs, momentjs, etc.). I added it to "declarations.d.ts" as well but that also didn't help.But I still went ahead and imported it manually like below:

import { WindowsAzure } from 'cordova-plugin-ms-azure-mobile-apps';

VS Code doesn't complain and the "ionic serve" also doesn't complain (while building the code) when I run the command. However, when the app tries to launch in browser (Chrome) I get a Runtime Error saying Cannot find module "cordova-plugin-ms-azure-mobile-apps".

Just to make sure, I tried to run it on my connected Android Phone using "ionic run android". On the phone also, it tries to launch the app (I get the splash screen as it is supposed to) then the screen goes all white and stays like that. I tried to inspect in Chrome after connecting my Android phone to my laptop. It showed the same "Cannot find module "cordova-plugin-ms-azure-mobile-apps" error as "Uncauth Error". Please note, I ran the app on phone before adding (and using it in the code) this library and it worked like a charm.

To try another way, I added browser as a platform using the command:

ionic platform add browser

Then run the app using the command:

ionic run browser

Same behavior. It's not launching.

To try more, I added the library using command:

npm install cordova-plugin-ms-azure-mobile-apps --save

Then it got added to my app's package.json in "dependencies" section. Then when I tried to refer to it in my TypeScript file in "import" I got the the library as InteliSense option. But the end result is still the same. I still get Runtime Error "Cannot find module cordova-plugin-ms-azure-mobile-apps" in the Chrome browser and a white blank screen on Android phone.

I would highly appreciate if you could please help me to fix this. I desperately need help as I have exhausted all my options and all my thinking capabilities. :(

P.S. - this is happening only when I try in Ionic 2 app. Otherwise, it works absolutely fine when I use HTML/JavaScript/Cordova/Node.js in a separate project. :frowning:

Thank you.

Answer 1

Finally, got it working! Thanks for Microsoft support!

Not the best solution, I think, in the world of TypeScript but that's the only way to make it work.

So, all I had to do was to use the "WindowsAzure" namespace from "cordova-plugin-ms-azure-mobile-apps" as a regular plain old JavaScript variable instead of doing an "import".

That is, instead of importing WindowsAzure as:

import { WindowsAzure } from 'cordova-plugin-ms-azure-mobile-apps';

I declared it as a regular JavaScript object after all the "imports" and before "@Component" class and/or "@Injectable" service/provider class, as:

```

import { ... } from '...';

declare var WindowsAzure: any;

@Injectable
export class ... {
    client: any;
    ....
    constructor or yourMethod(...) {
        this.client = new WindowsAzure.MobileServiceClient('http://YourAzureMobileApp.azurewebsites.net');
    }
    ....
    ....
    //Your logic
}

```

So, apparently, in Ionic 2 if your third party library is not being recognized with regular "import" statement then you should try to use it in the old JavaScript way.

It was that simple a solution on something where I ended up spending 2 days. :(

Hope this helps somebody save their time.

Answer 2

To import a 3rd party cordova plugin which is not included in Ionic Native.

Try this: Check answer here.

If declaring cordova does not work: Do

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

IT should and is installing the plugin correctly.

Check the plugin.xml file in

plugins/cordova-plugin-ms-azure-mobile-apps There should be an entry:

   <js-module src="src_of_js" name="some_name">
    <clobbers target="global_object_name" />   </js-module>

Generally the clobbers target name is the global object name that is used for the plugin when all the cordova plugins are loaded.(This is generally cordova.plugins.somename) Typescript generally complains as it cannot find the global variable at transpilation time.

Just do:

declare var global_object:any;

after all the other imports in your file and use the plugin.

Answer 3

Whenever you add 3rd party cordova plugin, usually it adds the new objects to window object. And you don't need to import anything to use those objects. And It is also true for WindowsAzure plugin.

Once you add the 'cordova-plugin-ms-azure-mobile-apps' in your project, you can use window.WindowsAzure to call its functions.

Note: If the editor or build process complaints about window variable then you can define it in your ts file just after import statements as followed:

declare var window: any;

Answer 4

Here are the steps to add and use the cordova-plugin-ms-azure-mobile-apps plugin in an ionic app.

# Create a hello world ionic v2 project
ionic start ionicv2 --v2
cd ionicv2

# Add the Cordova plugin
ionic plugin add cordova-plugin-ms-azure-mobile-apps

# Add the following 3 lines to app.component.ts
declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursitename.azurewebsites.net");
window.alert("MobileServiceClient instance: " + client);

# Build and run for browser
ionic platform add browser
ionic run browser