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.
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.