Ionic-native: How to add my own custom plugin with ionic v2 app

[DILEEP-YADAV]

Hi! Team,

I have one issue , How to add my own custom cordova plugin with ionic v2 app.
would you any one suggest me.

[JustMeDaFaq]

Same question here, is it even possible?
Specificly wanted to add chromecast and amazon fling sdk.

[ihadeed]

Hey there,

Yes you can add your custom plugin to Ionic 2.

Since Ionic 2 uses TypeScript (by default) you might encounter some errors
while using a custom plugin.

What you need to do is add a line at the top of the page to declare the
variable that you are using. For example, if the plugin is called via
cordova.plugins.camera .. You need to add this line the top of your .ts
page to avoid errors:
declare var cordova: any;

That line will tell the IDE and the compiler to ignore any calls made to
that variable (and its child properties/methods).

It's worth noting that when you use plugins this way, you need to wrap it
with a couple if statements to make sure it doesn't throw errors while
running on a browser or an unsupported device. (Ionic Native handles that
for you)

Also, you can always submit an issue here to request a plugin to be added
so you can use them through Ionic Native. We just need the plugin name and
the link to their repository.

On Sep 3, 2016 2:42 AM, "DILEEP YADAV" [email protected] wrote:

Hi! Team,

I have one issue , How to add my own custom cordova plugin with ionic v2
app.
would you any one suggest me.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-native/issues/525, or mute the thread
https://github.com/notifications/unsubscribe-auth/ANJ8dMTvMooANAx89qR6YDkTUMKon8Gmks5qmRa8gaJpZM4J0PW9
.

[dheerajsw]

I have similar problem. I am not sure how to consume custom plugin in typescript (.ts) file.
This is my plugin.js file
var exec = require('cordova/exec');

function PhoniroPlugin() {
console.log("Phonirolugin.js: is created");
}

PhoniroPlugin.prototype.showToast = function(aString){
console.log("PhoniroPlugin.js: showToast");

exec(function(result){
/alert("OK" + reply);/
},
function(result){
/alert("Error" + reply);/
},"PhoniroPlugin",aString,[]);
}
var phoniroPlugin = new PhoniroPlugin();
module.exports = phoniroPlugin;

Now how to import this plugin in testpage.ts file

[dheerajsw]

I have not published this plugin. It's on my local machine.
Do I need to publish to use this plugin in my app

[ihadeed]

@dheerajsw no you don't need to publish it.

In your plugin.xml there should be a line like this: https://github.com/zyramedia/cordova-plugin-stripe/blob/master/plugin.xml#L5 that indicates the global variable for your plugin.

For example, if I wanted to use the plugin I just linked, I need to do add declare var cordova: any at the top of my typescript file. This will allow me to call cordova.plugins.stripe.methodName() without any TypeScript compiler errors.

[dheerajsw]

I am new to this development.
This is my testpage.ts file

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
declare var cordova: any;
@Component({
selector: 'page-visitdetails',
templateUrl: 'visitdetails.html'
})
export class VisitdetailsPage {
public selectedItem: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.selectedItem = navParams.get('item');
}
ionViewDidLoad() {
console.log('ionViewDidLoad VisitdetailsPage');
}
openLock(){
cordova.plugins.PhoniroPlugin.showToast('testing...');
}
}
Now I get this error.
Uncaught ReferenceError: cordova is not defined
at eval (eval at evaluate (:117:21), :1:1)
at VisitdetailsPage.openLock (http://localhost:8100/build/main.js:53138:9)
at CompiledTemplate.proxyViewClass.View_VisitdetailsPage0.handleEvent_20 (/AppModule/VisitdetailsPage/component.ngfactory.js:246:34)
at CompiledTemplate.proxyViewClass. (http://localhost:8100/build/main.js:91188:37)
at HTMLButtonElement. (http://localhost:8100/build/main.js:36596:36)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
at Object.onInvokeTask (http://localhost:8100/build/main.js:34667:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:10836)

Please help me fix this issue.

[ihadeed]

@dheerajsw yeah you also need to wrap you method with the following:
` if (typeof cordova !== 'undefined') { // your code here }

`

[dheerajsw]

It worked. Thank you for helping in understanding how to consume plugins.

[maangcctv]

How does it work?
if you get the error

Uncaught ReferenceError: cordova is not defined

that means cordova is not defined forever,

then if you use the codes

if (typeof cordova !== 'undefined') {
// code1
cordova.plugins.myPlugin.myMethod();
}else{
// code2
}

the code2 will run everytime,!!!!
But actually you want to run the code1 ,your own plugin,,,Right?

[maangcctv]

@ihadeed Hi how does it work?

If the cordova is undefined ,,,How could I run the cordova plugins??

[maangcctv]

@dheerajsw
Hi,.How does it work ? Can you show me the core code?

[maangcctv]

@dheerajsw
@ihadeed
I solved it !

The cordova plugin can not test in a browser! It only could run in a device or emulator~~

So in browser it will run code1 everytime, But run code2 in a emulator!

Thank you for your help!

[bhavinwebdesk]

Hi @maangcctv
Where do you put your plugin code? Is it in git or in local? Do you have to declare it anywhere else? Like package.json or somewhere?

[sivasankarp]

HI All

Can you please guide me in writing the ionic custom plugin, i have written native iOS - ObjectiveC++.
i want to use in my ionic application. please guide or share the link to create ionic plugin & use it in the ionic code.

Thanks in advance

[rolinger]

The declaration of cordova is well defined, but what about window.plugins ?

In my Ionic v1 I was ensuring proper image/DIV sizing based on total screen size, to get this I was using:

cordova plugin add cordova-pluign-screensize ;

useage:

window.plugins.screensize.get(function(result) {
   deviceData.screenSize = result ;
}, function (error) {
   console.log("Error getting screensize") ;
}) ;

How do I convert this to Ionic v2?

[pranavkumar389]

I am new to this development.
This is my testpage.ts file

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
declare var cordova: any;
@component({
selector: 'page-visitdetails',
templateUrl: 'visitdetails.html'
})
export class VisitdetailsPage {
public selectedItem: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.selectedItem = navParams.get('item');
}
ionViewDidLoad() {
console.log('ionViewDidLoad VisitdetailsPage');
}
openLock(){
cordova.plugins.PhoniroPlugin.showToast('testing...');
}
}
Now I get this error.
Uncaught ReferenceError: cordova is not defined
at eval (eval at evaluate (:117:21), :1:1)
at VisitdetailsPage.openLock (http://localhost:8100/build/main.js:53138:9)
at CompiledTemplate.proxyViewClass.View_VisitdetailsPage0.handleEvent_20 (/AppModule/VisitdetailsPage/component.ngfactory.js:246:34)
at CompiledTemplate.proxyViewClass. (http://localhost:8100/build/main.js:91188:37)
at HTMLButtonElement. (http://localhost:8100/build/main.js:36596:36)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
at Object.onInvokeTask (http://localhost:8100/build/main.js:34667:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:10836)

Please help me fix this issue.

Getting the same issue.

HomePage.html:11 ERROR ReferenceError: cordova is not defined
    at HomePage.push../src/app/home/home.page.ts.HomePage.irisCall (home.page.ts:20)
    at Object.eval [as handleEvent] (HomePage.html:11)
    at handleEvent (core.js:23107)
    at callWithDebugContext (core.js:24177)
    at Object.debugHandleEvent [as handleEvent] (core.js:23904)
    at dispatchEvent (core.js:20556)
    at core.js:21003
    at HTMLElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

Wrapped the code into the undefined check block.
But, in that case, the plugin is not working. Probably because it goes to else block every time.

Please help.