Cordova plugins supported in Ionic?

Ionic Framework ionic-v3
1

I tried to test a plugin:

I installed it through:

cordova plugin add cordova-plugin-x-socialsharing

And run:

cordova prepare
cordova build ios

Then load the xcode project to run it in my iphone. But it seems that it’s not working. (I don’t know how to debug it). Here is my code:

Html:

    <ion-col>
      <button class="button button-clear"><img class="socil-button" src="img/fb-icon.png" alt="" (click)="window.plugins.socialsharing.share('Message, image and link', null, 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')"></button>

Any idea? Thanks.

2

Based on the document, there is only one thing related to cordova plugin mentioned. That is cordova-sqlite-storage. How about others? Not supported yet?

3

There are no abstractions for plugins (like ngCordova) provided for Ionic 2 yet, but you can still just use Cordova plugins using the normal syntax. No need to import anything or set anything up (unless the plugin requires some additional configuration), just ionic plugin add [plugin] and you’re good to go.

To see if you’re getting errors on the device use a program like GapDebug. For now, you can try changing your click handler to:

(click)="socialShare()"

and then add this function to your class:

socialShare(){
    window.plugins.socialsharing.share('Message, image and link', null, 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl');
}
1 Like
4

Thanks for your reply. Tried your code. But no response.

Can I test this plugin in emulator? Or I have to use something like GapDebug to test on real device?

5

Got the following error message through GapDebug:

32041EXCEPTION: Error during evaluation of “click”

ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating ‘l_window0_1.plugins’)

I think the window.plugins was not recognized. Am I right?

Should I add something in index.html?

6

I created another fresh new application. This time it works. So that I guess it could be something wrong in the settings somewhere although I could not figure it out.

The only thing I did in that application is I add web-client-platform for io.ionic.

Thanks @joshmorony, you make me confident to continue my ionic 2 journey.

7

I’m trying to get the Social Sharing plugin working, and am running into the following error message:

Property 'plugins' does not exist on type 'Window'.

I’ve run through the Cordova and Ionic command line inputs that are listed above, and copy / pasted the socialShare () function that @joshmorony posted.

Am I missing some configuration steps? Do I need to add a script directive to index.html? I tried the below, but no joy.

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

Thanks.

9

I think ionic 2 is not supporting ngCordova. So you have to use cordova plugin directly. I resolved a similar problem before by running:

ionic build ios

10

OK, I figured out the problem. It was building, but still showing errors under Visual Studio.

The solution was to stub out the Window.plugin methods in a .d.ts file. This is what I’m currently using:

/**
 * @description Adds the missing ngCordova definitions for the Window class,
 * thus enabling the app to build under Visual Studio. This is based on the
 * solution at:
 *
 * https://forum.ionicframework.com/t/ionic-2-with-ng-cordova/36103/24
 */
interface Window {
	/**
	 * @description Stub for the plugins variable.
	 */
	plugins: any;
}
11

Hey, could you be a lil more specific on your implementation? I’m still a lil confused on what exactly needs to be done.

Where did you place this .d.ts file? Is it necessary to import it anywhere after it is created?

12

The interface (above) is pretty much my implementation. All I needed was a reference to the Windows.plugin field. The code was saved in a file called ngcordova.d.ts in the app directory, along with the app.ts file.

I then added a reference to the d.ts file in my tsconfig.json in the files section.

"files": [
    "app/app.ts",
    "app/ngcordova.d.ts"
],

I didn’t import anything beyond that.

If that doesn’t work then feel free to ask. :slightly_smiling:

2 Likes
13

I tried following your suggestion. In the latest beta of ionic 2, they have changed files with filesGlob but I still added the line you suggested as below

  "filesGlob": [
    "**/*.ts",
    "app/ngcordova.d.ts",
    "!node_modules/**/*"
  ]

However, the error does not go away for me.

15

I am experiencing the same issue. I’ve added a .d.ts file, which gets rid of the type errors at build time, but window.plugins is still undefined at run time. This issue affects both the Social Sharing plugin and the Native Audio plugin.

16

@mattarod I was just about to try adding the Social Sharing plug-in to my app - have you been able to get it to work ok?

17

No, I have not. But give it a try and let me know if it works for you. If it doesn’t, do me a favor and give this thread a bump saying you’re experiencing the same issue.

18

I just tried it actually and it works fine.

19

I like your solution @TheMockGraeme. I just think it’s good to be a little be more precise than accepting any as plugins. In my case to add the calendar plugin I wrote the following in the definition file

interface Window {
plugins: WindowPlugins;
cordova:Cordova;
}

interface Cordova {
plugins: CordovaPlugins;
}

interface WindowPlugins {
calendar:ICalendarService;
}

interface CordovaPlugins {
diagnostic:Diagnostic;
}

interface Diagnostic {

// SuccessCallback give the answer. True if permission on or false for permission off
isCalendarAuthorized(
    successCallback: (authorized: boolean) => void,
    errorCallback: (error: string) => void): void;

}

interface ICalendarOptions {
startDate:Date;
endDate?:Date;
title:string;
location?:string;
notes?:string;
calendarName?:string;
}

interface ICalendarOptionsModify {
startDate:Date;
endDate?:Date;
title:string;
location?:string;
notes?:string;
newTitle:string;
newLocation:string;
newNotes:string;
newStartDate:Date;
newEndDate:Date;
}

interface ICalendarService {
createCalendar(options:ICalendarOptions):Promise;
deleteCalendar(calendarName:string):Promise;
createEvent(options?:ICalendarOptions):Promise;
createEventWithOptions(options?:ICalendarOptions):Promise;
createEventInteractively(options?:ICalendarOptions):Promise;
createEventInNamedCalendar(options?:ICalendarOptions):Promise;
findEvent(options?:ICalendarOptions):Promise;
listEventsInRange(startDate:Date, endDate:Date):Promise;
listCalendars():Promise<Array<{[key:string]:string}>>;
findAllEventsInNamedCalendar(calendarName:string):Promise;
modifyEvent(options:ICalendarOptionsModify):Promise;
deleteEvent(options:ICalendarOptions):Promise;
}

20

Hi,
I too having issues in using a non ionic native cordova plugin (a cordova plugin that still not exist in ionic native core).
For some customization reasons I need this specific barcode scanner plugin to use (https://github.com/tjwoon/csZBar).
But when I do so as it states the editor says couldn’t find cloudSky.zBar.scan().
I’m afraid this is true with all the cordova plugins out there (that are not in ionic native core) when tried to use with ionic 2 typescript based project. What should I do to make this work.

Below is a code snippet I just tried with above barcode scanner plugin.

import {Component, ViewChild} from '@angular/core';
import {Nav, NavController,Platform, AlertController} from 'ionic-angular';

    @Component({
      templateUrl: 'build/pages/home/home.html'
    })
    export class HomePage {
      @ViewChild(Nav) nav: Nav;
      cordova:any;

      constructor(public navCtrl: NavController, public platform: Platform) {

      }

      scan() {
        this.platform.ready().then(() => {
         this.cordova.plugins.cloudSky.zBar.scan({camera: "back", drawSight: true}, this.onSuccess, this.onFailure);


        }, (error) => {

       });

    }

    onSuccess(code: String){
      alert("scanned result: " + code);
    }

    onFailure(e : String){
      alert("scanned result: " + e);
    }

    }

Thanks.

1 Like
21

For ionic-native cordova plugins, you can import from ‘ionic-native’.
For non ionic-native cordova plugin, you can define your own class (if you have a look at codes in ionic-native plugin), you don’t need to write any implementation just abstract class.

2 Likes
22

I’m trying to use this Cordova WifiInfo Plugin, it’s a non ionic-native plugin. Any hint about how can I implement this in typescript and make it work with ionic 2?

1 Like