Ionic 2 with ng-cordova

I just spent some time on this so replying here. if you are using typescript, your editor/the build will report an error that navigator is undefined. It will work on the device though when the cordova plugin runs.

To fix this I downloaded phonegap.d.ts, which includes all the cordova interface definitions, added it to the project, and updated tsconfig.json to include:

“files”: [
“app/app.ts”,
“app/phonegap.d.ts”
],

that cleared up the typescript errors and gives you typing access to all the navigator attributes

2 Likes

This worked for me too :slight_smile: , “navigator” showed as undefined in the editor. @ootleman looks to have a fix for this.

When running in android emulator it pops a message showing no camera.
When running on IOS via IONIC.IO App it didn’t show up. Really not sure if ionic.io app supports cordova plugins yet.
However if you just drop your project into the phone-gap developer app the camera dialogue opens.
I don’t have xcode setup yet so i cant tell if it’s going to work natively or not? anyone done it?

I don’t need the camera, I want to get the cordova-plugin-ble-central working, but i cant seem to get access to the ble variable. any suggestions?

Hi, what’s that weird folder location for the typings file? putting them inside app means it will get transpiled, or at least that’s what looks like.

What i do is use the tsd npm package to init a tsd.json and a typings folder in the root of the app, using the tsd package let you easily install and keep up to date the tsd’s you install, and you can reference all the typings you install like this:

"files": [
  "app/app.ts",
  "typings/tsd.d.ts"
],

That tsd.d.ts will hold a reference to each tsd you install, you don’t have to worry about adding the file in the files array as good as you use the tsd command to install the ts definition.

thanks for the tip - that looks clean

Can’t speak for the cordova-plugin-ble-central plugin but the Camera plugin did work fine under xcode (only).

I ended up uploading the app and using the ionic view iOS app to test.

Do you think it will work the same with say a file that holds classes like models? i want to generate a models folder and have those clases available in all files of the app, as well as the typings.

Hi,

Do you have any sample project that Camera works with Ionic2? .

Made one here, please try out:

How can I install ionic-native? https://github.com/driftyco/ionic-native

Hi, I’m trying to use cordova inAppBrowser plugin by typing
"window.open = cordova.InAppBrowser.open;"
in my app.ts constructor but this doesn’t work, am I implementing this wrong?
I get a “cordova not defined” error.

Never mind, for anyone else with a similar problem I figured out I needed to put it outside the constructor in a platform ready callback function.

Hi joshmorony ! I just want to add some quirks…ng-cordova cleanly build with Angular-1 which is compatible with ionic 1(already built with Angular-1) .That’s why ng-cordova compatible with ionic-1. Apart from that ionic 2(built with Angular-2), that’s why ng-cordova will not use directly inside ionic-2. May be we should either wait for ng-cordova-2 for ionic-2 or just directly use simple cordova plugin which build with clean javascript.

Ionic Native is out now which is the equivalent of ngCordova for Ionic 2: http://ionicframework.com/docs/v2/native/Camera/

with

window.plugins.appPreferences;

I get an error: [ts] error: Property ‘plugins’ does not exist on type ‘Window’.

yea for some reason window.plugins doesnt exist for me either.
navigator.plugins does
cordova doesn’t

~edit
I ensured that my typings was up to date and i had installed the cordova typings correctly and now cordova comes up as allowed.

Push notifications with ionic 2
http://nishanthkabra.com/ionic2push.html

NishanthKabra, thank you very much.

Do you also know how to be able to extend the plugin?
I need to have some extra properties on data.additionalData.

Tried to extend the interface as it was documented here
, yet that failed miserably; Netbeans already indicates ‘cannot find namespace PhonegapPluginPush’.

Do you know what namespace I should use, or maybe a totally different approach?

module my.custom {
    export interface NotificationEventResponse extends PhonegapPluginPush.NotificationEventResponse {
        additionalData: NotificationEventAdditionalData;
    }

    export interface NotificationEventAdditionalData extends PhonegapPluginPush.NotificationEventAdditionalData {
        bacon?: boolean;
    }
}

push.on('notification', (data: my.custom.NotificationEventResponse) => {
    //standard attributes
    console.log(data.message);
    console.log(data.title);
    console.log(data.count);
    console.log(data.sound);
    console.log(data.image);
    console.log(data.additionalData);

    //custom attributes
    console.log(data.additionalData.bacon);
});

//// the rest is irrelevant because it won’t even compile

Add this following code in your ts and should be working.
As of now i am consuming additional data from server.
Client Side changes: Change1
Before your @App annotation add this in you app.ts.

export interface NotificationEventResponse extends PhonegapPluginPush.NotificationEventResponse {
additionalData: NotificationEventAdditionalData;
}

export interface NotificationEventAdditionalData extends PhonegapPluginPush.NotificationEventAdditionalData {
additionalData?: any;
}

Client Side changes: Change2 Updating notification data to have additional data:

push.on(‘notification’, (data:NotificationEventResponse) => {
console.log(data.additionalData.additionalData);
});

Server side changes: Change 1
message.addData(‘title’, ‘Title’);
message.addData(‘message’, “Message”);
message.addData(‘sound’, ‘default’);
var data = {};
data.type = “lunch”;
message.addData(‘additionalData’, data);

You should be able to receive additional data.type as lunch in your client.

In an Ionic V2 app?

I tried just like you said (before already), and get:
TypeScript error: app/app.ts(14,52): Error TS2503: Cannot find namespace ‘PhonegapPluginPush’.

[edit] I’m sorry, I’ve used Push from ionic-native. But cannot find the correct namespace for it, because I don’t know how to, haha… Now I’ve hacked it by using push.on(‘notification’, (data: any) => {/ ,

With an any type: TypeScript usefulness > /dev/null

1 Like

I have a similar problem, i can’t import the plugin’s functions to my project and use it.
I’m trying to find a solution, but I’m going crazy.

Here there is a Ionic1 project, but i need a working one for Ionic2. :disappointed_relieved:
http://devgirl.org/2016/01/08/speaking-with-cordova/