Ionic 2 and Azure

I’m building an Ionic 2 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 and Ionic 2 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 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

11 thoughts on “Ionic 2 and Azure

  1. martinherlovandersen

    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?

    Reply
  2. coreyroth

    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.

    Reply
    1. richardshergold Post author

      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

      Reply
  3. Gauzy

    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!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s