New Ionic + new Cordova no longer work for debugging (with livereload)

[marciusbezerra]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

New Ionic + new Cordova no longer work for debugging (with livereload)

Expected behavior:
run normally with cordova in livereload mode

Steps to reproduce:

On a new computer, I installed:

• Java
• Ant
• Andrioid Studio
• NodeJs
• Ionic and
• Cordova

And after everything configured just like the Ionic documents, I created a new basic app:

ionic start myApp tabs

The application even runs normally, but when I go to debug:

ionic cordova run android -lc

I get the following message:

console.warn: Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
console.warn: Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Related code:

Normal code, generated by Ionic's own standard template tabs

Other information:

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

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

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

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

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.3
    npm               : 5.5.1
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : d:\AndroidSdk

Misc:

    backend : pro

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-26,android-25,android-24,android-23,Google Inc.:Google APIs:23
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-3.2\bin\gradle

[DoubleMalt]

Same here :(

[SteveKennedy]

I'm pretty sure this is related to ionic-team/ionic-app-scripts#1354

[pistou]

Still a thing 👎

[itslenny]

As a workaround you can edit

node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

replace

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');

with

exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');

From this StackOverflow question

[rich186]

I had the same problem and ended up downgrading from ionic@3.20.0 to ionic@3.18.0. Fixed the issue (temporarily).

[gaurav-chandra]

Any update on this? This is very annoying.

[distante]

Same here

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

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

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

System:

    Android SDK Tools : 26.1.1
    Node              : v8.11.0
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

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

Misc:

    backend : legacy

[SteveKennedy]

I made a Cordova hook that you can add to your config.xml. It will edit the file that @itslenny mentions above. If you don't know what Cordova Hooks are, you can find more information at https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/. I recommend adding it like this

<hook src="scripts/fixcordova7issue.js" type="before_prepare" />

The code for the webhook is in this gist: https://gist.github.com/SteveKennedy/a9964b291afa51f820b5d73b687eeb34

[Maevus]

Still an issue with Ionic 3.20.0.

The fix described here on stackoverflow worked for me.

FIX: You need go to node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js and replace
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
to
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');

[msholly]

@SteveKennedy This is probably the best solution, since its not always a good idea to edit anything in the node_modules folder. But I have a change to your gist.

Line 37 should be

var targetFileString = "exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www');"

While your current code makes sense, the hook did nothing unless I changed it to above. But once changed, everything is working well in Corvoda 7.1.0. Thanks for your contribution!

[distante]

While the gist and/or the suggested edit works it makes the normal ionic serve think it is on a device with live reload too.

[msholly]

Interesting! Ultimately its a bug that will be addressed in the future by Ionic or Cordova teams, but this fix at least let me continue working on the emulator.

[giladrom]

You would think that this bug would be at the top of their queue. Strange.

[fernandocode]

This is a problem that should be treated as a priority because it is a BUG. Today I lost 3~4 hours until I get here, not to mention that when leaving the project of the repositiorio we will have to remember to edit the file.