Trying to get non ionic native wrapped plugin to work

Okay, so I know that this is a much discussed subject (I’ve been googling it all day). Also, I admit I am quite new to ionic, at least trying this version. The thing is, I’ve noticed that while there is lots of advice for how to overcome this issue, there are two main problems with doing so. If there is any official up to date documentation on how to do it, I can’t find it. If there is, please refer me to it.
The second issue is that most everything I find online is for an older version of ionic and thus doesn’t work as the methods of doing things have changed since then. One person said to not bother looking at tutorials and other information and just stick to the official documentation. i would love to, but refer back to problem one.
Anyways, I am simply trying to get a basic plugin to just load into my app. I have tested to see if it is broken by setting up a plain vanilla Cordava application and the plugin loaded right from the start.

Okay, so here is the basics. I have just recently installed ionic’s CLI and built a basic sidebar app. This is just a test app to learn how to do things, one of the first of which is to learn how to install a plugin.

Here is my ionic info output:

cli packages: (C:\Users\SURFACE\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2


Node : v9.3.0
npm  : 5.6.0
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set


backend : pro

I created the app using the ionic CLI and then added the plugin using the CLI too. It updated the config.xml and the package,json files.


<plugin name="cordova-plugin-chrome-apps-sockets-udp" spec="^1.3.0" />


 "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-chrome-apps-sockets-udp": {}

Also, here is the data from the plugins plugin.xml:

<plugin xmlns=""
    <engine name="cordova" version=">=3.0.0" />

  <name>Chrome Apps Sockets UDP API</name>

  <dependency id="cordova-plugin-chrome-apps-common@1" />

  <js-module src="sockets.udp.js" name="sockets.udp">
    <clobbers target="chrome.sockets.udp" />

  <platform name="android">
    <source-file src="src/android/" target-dir="src/org/chromium" />

    <config-file target="res/xml/config.xml" parent="/widget">
      <feature name="ChromeSocketsUdp">
        <param name="android-package" value="org.chromium.ChromeSocketsUdp"/>

  <platform name="ios">
    <dependency id="cordova-plugin-chrome-apps-iossocketscommon@1" />
    <source-file src="src/ios/ChromeSocketsUdp.m" />

    <config-file target="config.xml" parent="/widget">
      <feature name="ChromeSocketsUdp">
        <param name="ios-package" value="ChromeSocketsUdp"/>

I mostly put that there as someone mentioned about how the clobbers tag is the part to look for on how to access the plugin in javascript. So basically I am supposed to access it through chrome.sockets.udp. That fits with the plugins docs.

The problem I have is that I cannot access it at all. Yes, I have used declare var chrome: any; before the @Component. It doesn’t matter. All I get is a thrown exception for trying to access an undefined variable. I’ve tried looking for a cordova.plugins variable, doesn’t exist. I’ve tried looking in the windows object, nothing to do with plugins there.

Also, I should note, I am loading the app onto my phone, an LG G6 with Android 7.0.

A weird thing is, I am looking at the console output of the app using chrome developer tools. When I do this, it says this:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
app.component.ts:51 window:  
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
util.js:60 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
util.js:60 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
ion-dev.js?v=3.1.8:120 Dev server logger closed

Now, I’m not sure why it’s saying cordova isn’t loaded and why it can’t access the native plugins. Maybe it’s just the dev console that can’t see the data, I’m not sure. Doesn’t chrome’s dev tools access the actual log output from the device, or does it simply get the output of a simulation it’s running?

Sorry for the length, but I wanted to give as much detail as I could and frankly I’m super exhausted with trying to figure this out. I’ve tried using so many fixes already that simply did nothing. I’m hoping someone can point me in the right direction. Thanks in advance.

How do you get your app on those android phones?

Ionic view or dev app?

Or ionic cordova run android?

You know that cordova is not available through ionic serve (when viewing in the. Browser)?

And you know that not all plugins are available in ionic view and devapp? Defintely not the socket stuff

Adding a plugin by editing config.xml isnt te easiest way, compared to ionic cordova plugin add …

And you know you need to have android installed (hence a valid android_home path) if you want your own selection of plugins used on yhe phone?

Have your tried a simple plugin to work well the way you want it (like vibration)? And followed the doc carefully?

Thank you for the reply Tommerton

I used this to load ionic onto my phone:

ionic cordova run android --device --livereload

I do know that when cordova is loaded into the browser through serve that plugins and cordova aren’t available. That’s what confusing about the messages I am getting about cordova not being loaded. The debug output is coming from the phone. I have connected chrome to my phones output using both chrome://devices/ and pulling up remote devices through the dev tools menu. Both result in the same thing. According to everything I have read, this should give me the output from the app on the device itself.

And you know that not all plugins are available in ionic view and devapp? Defintely not the socket stuff

Can you please point me to the documentation that says this? Are you saying that not all cordova plugins are ionic-native wrapped? I know this, but everything i have read is that any cordova plugin can be loaded into an ionic app. The plugin I am trying to use is listed in cordova’s plugin registry and as I mentioned before, the purely cordova test app I created loaded the plugin without issue.

Also, I did add the plugin using ionic cordova plugin add. It automatically updated system files like config.xml for me. I placed references to those files just to show what it added to the system and to also show they weren’t missing.

I’m not sure what you mean by having android installed? Are you meaning the android sdk? I have android studio installed, I have the specific files for Android 7.0, which my phone has, installed. I’m pretty sure ionic cordova run would have failed to load the app onto my phone if I didn’t have the sdk installed properly, so I don’t think it has anything to do with this issue I am having.

To be honest, I’m not sure about why android_home is blank. I installed android studio and the sdk. I would think it would update value. The thing is, if this is causing a problem, wouldn’t building the app and sending it to my phone fail? I haven’t received even a warning from ionic when I run it. The app is built and loads on my phone. I will look into updating this value though anyways.

Thanks for the questions.


shows the plugins for ionic view. But as you are using ionic cordova run, this is not relevant.

I added a plugin in my project using
ionic cordova plugin add cordova-plugin-chrome-apps-sockets-udp

Maybe run ionic cordova requirements and show the output.


> cordova requirements

Requirements check results for android:

Java JDK: installed 1.8.0

Android SDK: installed true
Android target: installed android-26,android-25,android-24
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-2.14.1\bin\gradle

This is my ionic info, which is even older in some parts compared to yours…

cli packages: (C:\Users\xxxx\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2


    Android SDK Tools : 25.2.4
    Node              : v6.11.2
    npm               : 3.10.10
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\xxxxr\AppData\Local\Android\sdk


    backend : pro

There are some issues with livereload, I believe. I never use it. Try ionic cordova run android with the android phone connected through USB and see how that works?

Have you tried a simple ionic cordova android project with Vibration or some other more documented plugin? To see if your android dependencies etc are fine…

1 Like

Thank you Tommerton. It loaded up. It was the blasted --livereload clause afterall. For some reason it cuts off all sorts of stuff from happening. I had place some plain console.log debug statements in the top level html file where cordova and ionic are loaded and it even somehow blocked them from happening. Weird. Considering the ionic CLI said to run it, I should think it should come with a warning. Something like, hey run this neat feature, but note it will probably mess up a bunch of stuff and your code won’t run like it should. Sheesh.

Anyways thanks again. On a weird note, once I got it up and running, I still received a weird warning about the statusbar plugin. This time is wasn’t because cordova wasn’t loaded, but because it ends up it wasn’t installed. That seems strange as ionic was supposed to install it when it created the app to begin with. It’s part of the sidemenu app when you call ionic cordova start sidemenu.

just to add the most detail, here was the results of my requirements check

C:\Projects\test> ionic cordova requirements
> cordova requirements
Android Studio project detected

Requirements check results for android:

Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-27,android-26,android-25,android-24
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-4.1\bin\gradle
1 Like

Great. Please mark as solution