Ionic and Azure

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

13 thoughts on “Ionic 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?

  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.

    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

    1. Allan Harding (@alharding)

      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.

      The above reference to the CDN ( fixes the module error. Not ideal, but if you need a fix that’ll do it.

  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.


  4. dustkicka (@dustkicka)

    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(‘’);”

    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(‘’);”
    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’?


Leave a Reply to Allan Harding (@alharding) Cancel reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s