How to use custom plugin


#1

I have used JS to write a plugin, but in ionic2, I used the typescript.

i use : ionic plugin add [path],

But I don’t know how to use it in typescript.

I know the way to use the

import {pluginName} form ‘ionic-native’

I try : import {myPluginName} from ‘…/…/…/plugins/xxx/*.js’

But it was a hint.

Cannot find module…

What should I do???


#2

So theres a few thing that are a bit off here.

By “custom plugin” do you mean a custom cordova plugin?
Or do you mean a custom JavaScript, like an image slider or component?


#3

yse,i say custom cordova plugin


#4

I am having the same difficulty in understanding how to use custom plugins cordova. The example in the documentation is a bit confusing, do not say where or by using the plugin, lack an example.

My post:


#5

i look https://github.com/driftyco/ionic-native/blob/master/DEVELOPER.md
but this Guide is short ,I don’t understand


#6

you can look https://github.com/driftyco/ionic-native by typescript


#7

Thank you Lucien_fei.


#8

So there are few things that you both seem confused about.

Ionic-native needs to have the plugin API in it’s core in order to use it.

So

import {myPluginName} from '../../../plugins/xxx/*.js'

Will not work because the plugin is not part of the ionic native bundle.

If you have a custom plugin, you can do a few things.

  1. Make a PR to add it to ionic-native proper
  2. Use the raw plugin API.

You can use the raw plugin API without having it be part of Ionic Native.

The plugin is on the window object, so you would target the api normally

window.plugin.myPlugin.myMethod()


#9

Thanks.I can use my own plugins.


#10

I’m having the same issue and the raw plugin api doesn’t work in typescript.

Property ‘plugin’ does not exist on type ‘Window’.

I’m trying to use https://github.com/lampaa/com.lampa.startapp to start another app.


#11

I’ve found a way to hack this.
(window).startApp.set().start();
or
(window).CustomPlugin.method()


#12

I never had a problem with cordova custom plugin ( ZPL printer over tcpip) for ionic2@beta.19, however when I upgrade to beta 37 it does fail. the custom plugin that i am using cordova.plugins.zebra.tcp.printer.ZplOverTcpIp.print(ip, bclables) doesn’t work.

on ionic server start it throws an TypeScript error Error TS2304: Cannot find name ‘cordova’.

because of this error in beta.37 doesn’t load the ionic app at all and just show blank ionic lab page… I did not had problem with .19

i tried (window).CustomPlugin.method() and window.plugin.myPlugin.myMethod()

nothing works. my App suppose to go prod. Its on hold because of this issue… any advise would be great help.


#13

Referring to stirumala’s question.
If we have to add our plugin to ionic native ,we understand we have to submit PR.
How much time it takes for PR to add external plugin into ionic-native?


#14

Do we have any guidelines for PR?
the following link https://github.com/driftyco/ionic-native/blob/master/DEVELOPER.md doesn’t give sufficient information to raise PR.


#15

Pretty sure I just responded to you on slack, but I’ll post the same message here.

you need to have some typescript definitions for this,at least for the JS portion of the app similar to this

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/cordova/plugins/Device.d.ts

Basically what’s happening, TS doesn’t know about your code, so it wont build because it thinks you’re giving it invalid code. You need to let the compiler know about your plugin, and add it to typings


#16

Honestly I ran out off ideas :frowning:

My questions below may feel little basic for you :slight_smile:

The JS portion of my plugin file is ZplOverTcpIp.js which is www of the plugin

code having in ZplOverTcpIp.js is given below

var exec = require('cordova/exec');
exports.print = function(ipaddress,bclabels, success, error) {
    exec(success, error, "ZplOverTcpIp", "print", [ipaddress,bclabels]);
};

How can I let know about my plugin to compiler(typescripts) ?
I am not familiar with typings and you mentioned to add in typings, Please advise?

Thanks


#17

so it’s best to look at example, like the camera plugin.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/cordova/plugins/Camera.d.ts

So we first take care of the main camera method

interface Navigator {
     // we let the main navigator object know that it should have camera on it, and camera is a type of Camera.
// for you this would be your plugins main object
    camera: Camera;
}

Then we build out the methods for camera.

// Here we're describing the getPicture method
interface Camera {
    // getPicture has three arguments,
   // a success callback, error callback, and any options
    getPicture(

        cameraSuccess: (data: string) => void,
        cameraError: (message: string) => void,
        cameraOptions?: CameraOptions): void;
    
}

So this would be your plugin’s method, so something like customPrinter.print() followed by the success and error callback (or how ever you set it up)

Thats the general idea


#18

@Mike for our custom plugin ZPlPrint we have ZplOverTcpIp.js file created and if we create interface like you suggested ,imagine ZplOverTcpIp.d.ts and put it where asll .d.ts files are there
We are not sure how we can map that ZplOverTcpIp.d.ts to the actual code. Are we missing any step?

attaching file structure too.


#19

Whatever the interface we write for print in ts file , how it will interact with our custom plugin js file code as shown below.
our custom plugin js file.

var exec = require(‘cordova/exec’);
exports.print = function(ipaddress,bclabels, success, error) {
exec(success, error, “ZplOverTcpIp”, “print”, [ipaddress,bclabels]);
};

I am disconnected between the interface you suggest us to write for print and custom plugin that we need to interact with interface.

Please advise?


#20

To actually use the interface, you can do a few things.

The easiest would be to place in the root of your plugins directory.

This is the most straight forward and would let it travel with your plugin.

So this would go in the root, or the www folder, which ever you would like.

Then you can add a reference to in your typings/index.d.ts

Something like

/// <reference path="../plugins/com.plugin.name/index.d.ts" />

If you have this plugin on Github, I’d be able to give more detail