How to use non native plugins on Ionic?


#1

Hi there! After adding them, I’m triying to use these plugins (iosrtc and phoneRTC) but both need to be used like:

var session = new cordova.plugins.phonertc....

That’s the Ionic 1 way to do it, but what is the workaround with Ionic 2? I’ve been using native plugins which is very easy, just import and use it, but with non native?

Thank you!


How to make a native wrapper for cordova plugin that uses javascript
Using cordova plugin (WifiWizard) with Ionic app
#2

Hi, I tried to use the non native cordova WifiInfo plugin, but but without success

declare var cordova;

  getwifiinfo(){

    cordova.plugins.WifiInfo.getWifiInfo(this.success,this.err);

  }

I’ve seen on various websites (like here) you do not need to import anything, but I can’t understand how to do it


#3

Thank you! It worked!

Things that could help you :

  • Make sure you use the plugin only when the platform is ready.
  • Test it in a real device.
  • To install the plugin use ionic add instead cordova add.
  • What is your problem? I mean, do you get any answer from the plugin or you just
    can’t import it?

#4

Glad to hear that! :slight_smile:

I’m trying to use Cordova Plugin Wifiwizard

Yes I’ve tested in a real device (iphone 4s) and I get this error

Well, after several modifications this is my code right now:

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';


declare var cordova;

@Component({
  templateUrl: 'build/pages/page2/page2.html'
})
export class Page2 {

  public result;

  constructor(public navCtrl: NavController, navParams: NavParams, public platform: Platform) {
    
  }

success(results) {
   this.result = results;
  }

err(e) {
  this.result = e;
}


  getwifiinfo() {

    this.platform.ready().then(() => {


      cordova.plugins.WifiWizard.isWifiEnabled(this.success, this.err);


      StatusBar.styleDefault();
    });
  }



}

I want when I click a button to appear in a text box with the ID "result"
the information provided by the program.

Sorry for my dumbness, sorry for my dumbness i’m really sure that the
problem is that I don’t know how to implement plugins.


#5

What is the output when you do this
console.log(cordova.plugins.WifiWizard) ?


#6

Now it’s working, thank you :)!
I changed my config.xml (adding “plugin name=“com.pylonproducts.wifiwizard” source=“npm” spec=”~0.2.11"/>), the Plugin.xml (the target clobers was window.WifiWizard and I put cordova.plugins.WifiWizard) and the package.json (adding “com.pylonproducts.wifiwizard” to “cordovaPlugins”)! Honestly I never imagined that these could be the problems --’, when a plugin is installed these files should be updated accordingly --’

Now I have this code

import { Component } from '@angular/core';
import { NavController, NavParams, Platform, AlertController } from 'ionic-angular';
import { StatusBar } from 'ionic-native';


declare var cordova;



@Component({
  templateUrl: 'build/pages/page2/page2.html'
})
export class Page2 {

  public result = {};

  constructor(public navCtrl: NavController, navParams: NavParams, public platform: Platform, public alertCtrl: AlertController) {
    
  }

success(results) {

return results;

}

err(e) {
  return e;
}



  getwifiinfo() {

    this.platform.ready().then(() => {



      cordova.plugins.WifiWizard.getCurrentSSID(this.success, this.err);

      

      StatusBar.styleDefault();
    });
  }



} 

and I’m getting this finally :slight_smile:

Now what I don’t know is how I will catch this information and display it in a text box for example :confused: What kind of object is this?


#7

What have you added to your config.xml exactly ?
Have you edited “Plugin.xml” and/or “package.json” ?

Could you be clearer please ? :blush: I’m having same issue with another plugin…

Thank you :slight_smile:


#8

Hi, sorry I forgot to copy what I have added to config.xml! I edited Plugin.xml and package.json! Basically I looked inside every file of my project and looked for any configuration about plugins and added similar configurations for the plugin that I want to use!

in config.xml I have

in package.json I have

(sorry for my bad english :confused: )[quote=“Blaydator, post:7, topic:63936, full:true”]

What have you added to your config.xml exactly ?
Have you edited “Plugin.xml” and/or “package.json” ?

Could you be clearer please ? :blush: I’m having same issue with another plugin…

Thank you :slight_smile:
[/quote]


#9

Finally, I managed to use my non-native plugin very easily :

1) Just do the usual :

cordova plugin add <repo/name>

2) and use your plugin

window.plugins.yourplugin.someMethod()

In order to access to “window.plugins” with TypeScript you have to add a definition :

in :
typings/globals/window/index.d.ts

(create “window” folder and “index.d.ts” file)

and write in index.d.ts :

interface Window {
	plugins: any;
}

This allows you to use “window.plugins” with typescript.

Don’t forget to call your plugin after the device is ready with platform.ready() :

import { Platform } from 'ionic-angular';

[...]

constructor(platform: Platform) {
 
    platform.ready().then(() => {
 
     window.plugins.yourplugin.someMethod()
 
});

Sources :

http://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/

themockgraeme’ answer


Cordova plugins supported in Ionic?
#10

HI,

I changed the below files as per your suggestion.

  1. config.xml

  2. package.json

3, Sample code. I am calling getwifiinfo() meths from button click.

  1. Error in Xcode console, while clicking the button from real device.

2016-11-26 07:20:49.976 Sample[1018:120781] ERROR: Unhandled Promise rejection: undefined is not an object (evaluating ‘cordova.plugins.WifiWizard.isWifiEnabled’) ; Zone: angular ; Task: Promise.then ; Value: TypeError: undefined is not an object (evaluating ‘cordova.plugins.WifiWizard.isWifiEnabled’) file:///var/containers/Bundle/Application/9DD498A1-ED60-4F88-AB94-4A7FFEC12B58/Sample.app/www/build/main.js:11:7941

Can you please help me to find, where i am doing wrong?

Thanks


#11

Just to keep everyone up to date, the full name of wifiwizard in config.xml and package.json results in the ionic package error. The error is

Error: Registry returned 404 for GET on https://registry.npmjs.org/com.pylonproducts.wifiwizard

And indeed if you go to this URL, there is nothing there. What works is the url: https://registry.npmjs.org/wifiwizard

It is the same issue on the github (1 year old)
I managed to work around the compilation error - by using the same trick -

<plugin name="wifiwizard" value="com.pylonproducts.wifiwizard.WifiWizard" />
It does not work however. I am still investingating


#12

Do you have a sample project for this? There must be some details I miss


#13

I would love for the moderator to step in. I think the topic of cordova plugins not covered by ionic-native is of the paramaunt importance. It must be, IMHO, part of the tutorial.


#14

All solutions tried didnt work. What worked was declaring the plugin and using it directly.

declare var PluginName:any

and then use it directly.

PluginName.method()

#15

Hi, sorry but my code is no longer working :/, I don’t know what happened, it just crashed for no reason, I tried to starting all over again, but nothing! I’ve been struggling with this wifiwizard plugin for months without any success :frowning: Now I’m getting a similar error!


#16

Your simple solution now works for me, too! I installed the new updates and it’s working!


#17

Hi guys,

For those that stumble upon this trying to get ‘non native’ Cordova plugins working, here is some advice I found that helped me when trying to get the Scandit barcode scanner working but I think it applies to plugins in general.

Check the plugin.xml file in the root of the plugin’s directory, e.g. /plugins/com.mirasense.scanditsdk.plugin/plugin.xml, here you will find <clobbers> elements which will indicates the namespace for exported modules of the plugin. Looking at these you can work out how to reference the plugin within your app.

For example, the License module of the Scandit plugin has the following namespace:
<clobbers target="Scandit.License"/>

I was able to reference and use it in my code by declaring and using it directly, like so:
...
import { Platform } from 'ionic-angular'

declare var Scandit;

@Component({
...

scan() {
    this.platform.ready().then(() => {
      Scandit.License.setAppKey("...");
...

This unfortunately doesn’t work for the development server though, brings up reference errors, but it should work on a device.


Telerik Mapbox: Cannot read property 'show' of undefined
#18

Glad to have helped.


#20

Hi,

I am trying to use wifiwizard in my app. do you know what is the right config.xml and package.json file to run the plugin?

Thanks


#21

Sorry no. I am going to get back to ionic in about 3 weeks time. Now doing a pure web app