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.

10 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

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