Can't get Azure to work with Ionic2/Angular2/Cordova app

Question

I am using the base Ionic2 Blank app. When I instantiate Azure with the following line in home.ts

import azureMobileClient from 'azure-mobile-apps-client';

, it deploys without an error. The failure is just a blank screen on Ripple or a blank screen on the device. I do not see any errors on build.

Current setup: Win10 x64 Visual Studio 2015 Community Cordova CLI: 6.3.1 Ionic Framework version: 2.0.0-rc.1 Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 Node Version: v4.6.0

Here are the steps I took

Create new project from Ionic 2 (Beta 10)
Blank Restore dependencies
ran "npm install azure-mobile-apps-client" (received npm WARN enoent ENOENT)
Edit package.json, added "azure-mobile-apps-client": "^2.0.0-rc1"
In app folder, create new file declarations.d.ts.
Added
declare module 'azure-mobile-apps-client'; to declarations.d.ts (Deploy still shows home page)
Edited home.ts, added
import azureMobileClient from 'azure-mobile-apps-client'; under import {NavController} from 'ionic-angular'; (Project deploys but shows blank screen)

Package.json

{
  "name": "io.cordova.myapp3e6a78",
  "private": true,
  "version": "0.0.1",
  "description": "ionic2-ts-blank: An Ionic project",
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.2.4",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "azure-mobile-apps-client": "^2.0.0-rc1"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5",
    "typings": "^1.3.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [ ],
  "scripts": {
    "build": "node_modules/.bin/gulp build",
    "typings": "node_modules/.bin/typings install",
    "postinstall": "npm run typings && npm run build"
  }
}

declarations.d.ts declare module 'azure-mobile-apps-client';

home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import azureMobileClient from 'azure-mobile-apps-client';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navController: NavController) {
    }
  onLink(url: string) {
      window.open(url);
  }
}

@RandikaRatnayake I got further, but still couldn't get Azure to connect. I manually added all the packages because there was some kind of loading issue. I also had to manually add an Azure typings and then the page would load, but once I actually called any Azure method I would get an instantiation error. I tried using both app level and page level Azure object declarations, to no avail. Very frustrating. I was able to do normal web calls, but not Azure. I haven't played with it in two months.. If you have any insights, I'd appreciate them. — Aeroradish

Adrian Hall Adrian Hall · Accepted Answer · 2016-10-24T02:01:09

You aren't actually using azureMobileClient in your code, aside from bringing it in. The ENOENT means it didn't get downloaded. You need a successful npm install before you can use it. You then actually need to use it.

Can't get Azure to work with Ionic2/Angular2/Cordova app

1 Answers