I’m building an Ionic application at the moment using the very latest version of the framework (RC0) and one of the problems I encountered was how to include and reference the Azure Javascript SDK so that my app could use an Azure back-end.
I had some problems with this initially but finally got it to work in the end. Two things came to my rescue.
Firstly, just at the time I was struggling with this, the Ionic team published an article “Using 3rd Party Libraries”. This was a great help and I urge you to check it out of you are having any difficulties in using 3rd party libraries with Ionic 2.
Following that article I knew that all I had to do to use the library was run the following command from the CLI:
npm install azure-mobile-apps-client –save
and then add:
declare module ‘azure-mobile-apps-client’;
to my declarations.d.ts file (as there was no Typings file available for the library)
I then had some problems trying to reference the library and use it within my application. Although I was working at the weekend, I reached out to Ionic’s Dan Bucholtz via twitter, expecting that maybe on the Monday I might get a reply. That was to underestimate Super Dan and within minutes he was helping me out (thanks Dan). Finally I managed to get things working. And it was all very simple.
In my components/services I now have:
import azureMobileClient from ‘azure-mobile-apps-client’;
and in their constructor:
this.client = new azureMobileClient.MobileServiceClient(azureURL);
this.table = this.client.getTable(tableName);
and it now all works swimmingly well ! 🙂
Firstly thanks to this timely article from the Ionic Framework team about using 3rd party libraries and secondly thanks to some help from Dan Bucholtz
I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic but also with other mobile frameworks and technologies. Thanks for visiting.
Hi just what the doctor ordered (-:
It’s sounds like you using Azure App Services? If you are, can you help me setting up App Services?
I am using Visual Studio and C# for the odata backend. So I need to set this up on windows.
I need a solution containing 3 projects:
Ionic 2.
web site for my product.
API for my app.
Do you know of a good guide to follow?
Hi! I am having the same problem as the guy in this question:
https://forum.ionicframework.com/t/microsoft-is-not-defined/67409
Which seems pretty similar to this post. Would be great if you could help out 🙂
Does this technique still work for you with RC2? I’ve tried this with a few different projects and I get a Cannot find module “../../../../package.json”(…) error at runtime.
Corey. Yes, I’m getting the same problem but have not had time to look at it yet. I need to. If you – in the meantime – find out what the problem is, let me know. Thanks. Richard
Corey see this. I’m just trying the nightly script build now.
https://github.com/driftyco/ionic-app-scripts/issues/389
I fixed this with the latest nightly ionic build script (as I write its 0.0.45-201611190532) and I also had to install the Esprima package with npm
this still does throw this exception
Uncaught Error: Cannot find module “../../../../package.json”
is there a way to resolve it ?
Hi. I’ve not looked at this for a while – did you try the fix I mentioned above?
this still does throw this exception
Uncaught Error: Cannot find module “../../../../package.json”
is there a way to resolve it ?
I was getting the same error following the above. This isn’t ideal but if you include the azure-mobile-apps-client.min.js file in your index.html file of your Ionic2 app it will resolve the module issue.
https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-html-how-to-use-client-library
The above reference to the CDN (https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js) fixes the module error. Not ideal, but if you need a fix that’ll do it.
I am getting a 405 error while querying a table. Do you have any idea of what I have to do ?
Thanks a lot for your article. It really helped!
I thought about it, that is, to install it locally in my app so that I can refer it in import statements in my .ts files but being new to Ionic 2 framework and TypeScript, I wasn’t sure.
Your article and link to “Using Third Party Libraries” on Ionic’s website helped and confirmed my understanding.
One thing that is mentioned by you and also in the Ionic’s link but I did not do is creating the “.d.ts” file and adding an entry for the library. I didn’t have to do that. I tried to import WindowsAzure in my .ts file from cordova-plugin-ms-azure-mobile-apps and it was able give me that as InteliSense option (which means it recognized the library without doing the “.d.ts” file part.
Thought of sharing my experience.
Thanks!
I managed to get it to work however I don’t have any intellisense
in my declarations.d.ts I have
declare module ‘azure-mobile-apps-client’;
In my .ts file where i want to use azure functionality I have an import
“import azureMobileClient from ‘azure-mobile-apps-client’;”
I can then connect to azure, with no intellisense
“var azureConnection = new azureMobileClient.MobileServiceClient(‘https://site.azurewebsites.net/’);”
what I noticed was that my “node_modules\@types\azure-mobile-services-client” folder I have a “index.d.ts” file. This is the declaration file for Azure Mobile Services. This file has a static reference to Azure “declare var WindowsAzure: Microsoft.WindowsAzure.WindowsAzureStatic;”
When I try to use it in my .ts file e.g.
“var azureConnection = new WindowsAzure.MobileServiceClient(‘https://site.azurewebsites.net/’);”
I get intellisense but ionic complains and throws the white screen of death.
I’m assuming that the static reference to azure is for javascript scenarios and not typescript/ionic way of going about it?
is there no declaration file for ‘azure-mobile-apps-client’?