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
System:
Node : v9.3.0
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : not set
Misc:
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.
config.xml:
<plugin name="cordova-plugin-chrome-apps-sockets-udp" spec="^1.3.0" />
package.json:
"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:
[code]
<plugin xmlns="http://cordova.apache.org/ns/plugins/1.0"
id="cordova-plugin-chrome-apps-sockets-udp"
version="1.3.0">
<engines>
<engine name="cordova" version=">=3.0.0" />
</engines>
<name>Chrome Apps Sockets UDP API</name>
<keywords>chrome,socket,sockets,udp</keywords>
<repo>https://github.com/MobileChromeApps/cordova-plugin-chrome-apps-sockets-udp.git</repo>
<issue>https://github.com/MobileChromeApps/cordova-plugin-chrome-apps-sockets-udp/issues</issue>
<dependency id="cordova-plugin-chrome-apps-common@1" />
<js-module src="sockets.udp.js" name="sockets.udp">
<clobbers target="chrome.sockets.udp" />
</js-module>
<platform name="android">
<source-file src="src/android/ChromeSocketsUdp.java" 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"/>
</feature>
</config-file>
</platform>
<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"/>
</feature>
</config-file>
</platform>
</plugin>
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.