Ionic-cli: cordova not available when running on android with the -l flag

[ionitron-bot[bot]]

Bug Report

Ionic Info

$ ionic info
√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (C:\Users\Toch\AppData\Roaming\nvm\v10.10.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 18 other plugins)

System:

   NodeJS : v10.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug
Whenever I try to run my ionic app with live-reloading enabled on my Android device (ionic cordova run android -l), None of my plugins work, and I get the warning message, Cordova not available. If I run the same command without the -l flag it runs fine, but one can imagine how frustrating development can be without live reloading

Steps to Reproduce
Steps to reproduce the behavior:

1. create a new ionic app
2. add the Android platform with some plugins
3. run the command "ionic cordova run android -l"
4. try to access any native feature
5. See error

Expected Behavior
Cordova should be available when running on a real native device

Additional Context
I am using nvm to manage different versions of Node on my machine.

[imhoffd]

@Tochukwuibe Your dependencies look right to me. Which error do you see? I assume it's in the DevTools console of the device.

[Tochukwuibe]

@dwieeb yes, i see the warning that says, Cordova not available when I use chrome://inspect. this happens whenever i try to access any native features, I think the build server is either not adding or can't find Cordova js when you run on a native device using the -l flag. there was a similar issue like this in V3, the fix (hack) there was to go into the dist server folder under ionic in node modules and change the path to the Android platform, however, in v4 this doesn't work.

[imhoffd]

In v4, we're not in total control of the livereload server (because it's running serve from the Angular CLI), so we can't redirect requests to a given folder. What we do instead is here:

https://github.com/ionic-team/angular-toolkit/blob/7bc2839a79f2debc190d11386e2bb857913e9469/builders/cordova-build/index.ts#L35-L62

This code registers all the Cordova assets from a platform's platform_www folder and then adds cordova.js to index.html. It does all of this during a build (or a serve, for -l, which uses build), as long as you see that it's running ng run app:ionic-cordova-serve instead of the usual ng run app:serve.

[imhoffd]

@Tochukwuibe Can you verify that it's running ng run app:ionic-cordova-serve? If it is, check index.html for cordova.js and the related network requests for the Cordova assets.

[Tochukwuibe]

@dwieeb right after i run the command "ionic cordova run android -l " the cli then runs the command "ng run app:ionic-cordova-serve --host=0.0.0.0 --port=8100 --platform=android" but no cordova.js is not present in index.html

[Tochukwuibe]

@dwieeb i just tried adding cordova.js manually with a script tag to the head in index.html but the debug console shows a 404 error for cordova.js

[imhoffd]

@Tochukwuibe What are the contents of platforms/android/platform_www ?

[Tochukwuibe]

The folder structure is as follows @dwieeb

-cordova-js-src/
-plugins/
-cordova_plugins.js
-cordova.js

[imhoffd]

@Tochukwuibe That also looks right. I'm stumped so far. Can I see your angular.json file for the configuration of ionic-cordova-build and ionic-cordova-serve?

[Tochukwuibe]

@dwieeb here it is

"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}

[imhoffd]

@Tochukwuibe Oh, I'm sorry. I see what's wrong.

[Tochukwuibe]

@dwieeb feel free to share lol

[imhoffd]

@Tochukwuibe It was a bug in the @ionic/angular-toolkit package. Please update to the latest version (just released) and let me know if it resolves your issue:

npm i @ionic/angular-toolkit@latest

[Tochukwuibe]

yes, @dwieeb I can confirm that updating the @ionic/angular-toolkit package fixed the issue for me. Thank you