Packages for cordova are not loading when deployed to a device

Viewed 1159

I've got a Cordova app that works great when deployed to a browser, or simply loaded to a browser. However, when the app is sent to a device via cordova run android the plugins are not found.

Using the Chrome remote device inspector, I can see the plugis failing to load in what I would expect to be the normal location.

Cordova Plugins missing

In the snippet below is a copy of the config.xml some items censored.

<?xml version='1.0' encoding='utf-8'?>
<widget defaultlocale="en-US" id="---censored---" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps">
  <name>---censored---</name>
  <description>---censored---</description>
  <author email="---censored---" href="---censored---">---censored---</author>
  <vs:template-name>BlankJS</vs:template-name>
  <content src="index.html" />
  <access origin="*" />
  <preference name="SplashScreen" value="screen" />
  <preference name="windows-target-version" value="10.0" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#fff" />
  <allow-navigation href="*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
    <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
  </platform>
  <platform name="android">
    <icon density="ldpi" src="res/icons/android/icon-36-ldpi.png" />
    <icon density="mdpi" src="res/icons/android/icon-48-mdpi.png" />
    <icon density="hdpi" src="res/icons/android/icon-72-hdpi.png" />
    <icon density="xhdpi" src="res/icons/android/icon-96-xhdpi.png" />
  </platform>
  <platform name="ios">
    <icon height="180" src="res/icons/ios/icon-60-3x.png" width="180" />
    <icon height="60" src="res/icons/ios/icon-60.png" width="60" />
    <icon height="120" src="res/icons/ios/icon-60-2x.png" width="120" />
    <icon height="76" src="res/icons/ios/icon-76.png" width="76" />
    <icon height="152" src="res/icons/ios/icon-76-2x.png" width="152" />
    <icon height="40" src="res/icons/ios/icon-40.png" width="40" />
    <icon height="80" src="res/icons/ios/icon-40-2x.png" width="80" />
    <icon height="57" src="res/icons/ios/icon-57.png" width="57" />
    <icon height="114" src="res/icons/ios/icon-57-2x.png" width="114" />
    <icon height="72" src="res/icons/ios/icon-72.png" width="72" />
    <icon height="144" src="res/icons/ios/icon-72-2x.png" width="144" />
    <icon height="29" src="res/icons/ios/icon-small.png" width="29" />
    <icon height="58" src="res/icons/ios/icon-small-2x.png" width="58" />
    <icon height="50" src="res/icons/ios/icon-50.png" width="50" />
    <icon height="100" src="res/icons/ios/icon-50-2x.png" width="100" />
  </platform>
  <platform name="windows">
    <icon height="150" src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" />
    <icon height="360" src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" />
    <icon height="30" src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" />
    <icon height="310" src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" />
    <icon height="44" src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" />
    <icon height="106" src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" />
    <icon height="70" src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" />
    <icon height="71" src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" />
    <icon height="170" src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" />
    <icon height="50" src="res/icons/windows/StoreLogo.scale-100.png" width="50" />
    <icon height="120" src="res/icons/windows/StoreLogo.scale-240.png" width="120" />
    <icon height="150" src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" />
    <icon height="360" src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" />
  </platform>
  <platform name="android">
    <splash density="land-hdpi" src="res/screens/android/screen-hdpi-landscape.png" />
    <splash density="land-ldpi" src="res/screens/android/screen-ldpi-landscape.png" />
    <splash density="land-mdpi" src="res/screens/android/screen-mdpi-landscape.png" />
    <splash density="land-xhdpi" src="res/screens/android/screen-xhdpi-landscape.png" />
    <splash density="port-hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
    <splash density="port-ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
    <splash density="port-mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
    <splash density="port-xhdpi" src="res/screens/android/screen-xhdpi-portrait.png" />
  </platform>
  <platform name="ios">
    <splash height="480" src="res/screens/ios/screen-iphone-portrait.png" width="320" />
    <splash height="960" src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" />
    <splash height="1024" src="res/screens/ios/screen-ipad-portrait.png" width="768" />
    <splash height="2048" src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" />
    <splash height="768" src="res/screens/ios/screen-ipad-landscape.png" width="1024" />
    <splash height="1536" src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" />
    <splash height="1136" src="res/screens/ios/screen-iphone-568h-2x.png" width="640" />
    <splash height="1334" src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" />
    <splash height="2208" src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" />
    <splash height="1242" src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" />
  </platform>
  <platform name="windows">
    <splash height="300" src="res/screens/windows/SplashScreen.scale-100.png" width="620" />
    <splash height="1920" src="res/screens/windows/SplashScreen.scale-240.png" width="1152" />
    <splash height="1920" src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" />
  </platform>
  <vs:toolsetVersion>6.3.1</vs:toolsetVersion>
  <preference name="target-device" value="universal" />
  <preference name="Orientation" value="default" />
  <preference name="Fullscreen" value="True" />
  <engine name="android" spec="^6.2.3" />
  <engine name="browser" spec="^4.1.0" />
  <engine name="ios" spec="~4.2.0" />
  <engine name="windows" spec="~4.4.2" />
  <plugin name="cordova-plugin-device" spec="^1.1.6" />
  <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
  <plugin name="cordova-plugin-statusbar" spec="~2.2.3" />
  <plugin name="cordova-plugin-whitelist" spec="1.2.2" />
</widget>

Cordova.js loads just fine, but I cannot get the plugins to load outside of the browser.

Any direction would be greatly appreciated!

Edit I found some information related to how TACO works, I believe I may be in a situation similar to this.

5 Answers

Did you try to remove plugins and re-add them via cordova plugin add <plugin name>?

What is cordova plugin list output?

What is the output for cordova build android -XLint:all?

Check that you've import plugins in your appropriate html file

It looks like your config have missing one important plugin:

<plugin name="cordova-plugin-splashscreen" spec="^3.2.2" />

I use 3.2.2 in my config, you can try with the newest version 4.0.3.

You can check also if all plugins are available in plaftorms/android/platform_www/plugins:

enter image description here

Can you please post the environment information run:

ionic info

Does ionic serve give any errors? This might be a compatability issue, or a permissions issue. also can you please confirm that the not found files do not exist in the Platform folder? Go to platforms>android>platform_www>plugins in the worst case I would recommend that you copy your project folder as a backup, go to project directory delete the node_modules folder, the run:

npm install

this will update the library.

Try changing the Cordova CLI to some lower version in config file under Platforms.

When Cordova generates the plugins, it creates the a folder on the root directory, plugins. We were using our own Plugins folder to hold some 3rd party JS animation plugins. Due to the case insensitive nature of Windows. There was no error running in the browser.

When deploying to Android Windows would build the files, check for plugins and match Plugins and move them into there. This is why the extracted apk file appeared correct. When android sought the files, it didn't match Plugins and could not locate my plugins at all.

Long story short, Do not create a folder with a difference case than plugins for housing external plugins.

Related