Ionic-app-scripts: livereload does not work with cordova-android 7

[harshithkashyap]

Short description of the problem:

The livereload plugin fails to serve cordova.js file and serves // mock cordova file during development even while running the app on a device. The dev-server fails silently with ENOENT error here.

[13:12:20]ENT: no such file or directory, stat 'C:\Users\Harshith Kashyap\dev\ionic-app\platforms\android\assets\www\cordova.js'

This is happening because cordova-android@7 was updated to Android Studio based project structure and assets/ directory is no longer available in platforms/android/

What behavior are you expecting?

ANDROID_PLATFORM_PATH here is hard coded here to platforms/android/assets/www directory. It should be updated to platforms/android/app/src/main/assets/www for cordova-android 7 projects.

Steps to reproduce:

1. Clone https://github.com/harshithkashyap/ionic-app/
2. npm install
3. ionic cordova platform add android
4. ionic cordova run android -lc --device
5. Once the app is opened on the device, the following message should be seen in the terminal.

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

Which @ionic/app-scripts version are you using?
ionic info

    @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.7
    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.6.0
    OS                : Windows 10

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Platforms directory structure for cordova android 6 and 7.

cordova-android 6:

cordova-android 7:
Notice there is no platforms/android/assets directory. Its moved to platforms/android/app/src/main/assets

[SteveKennedy]

Out of curiosity, why does this only effect _livereload_? I'm finding the same exact issue running the app without _livereload_. Even after compiling for release/production (apps that worked in 6.4.0), produces this same exact issue. Meaning, "Cordova is not available" errors occur in normal runtime of app using 7.0.0.

I also created a brand new Ionic app from scratch: _ionic start myapp_. Then added android to platforms. It automatically added latest cordova-android@7. Then running the app with --livereload also produces the "Cordova not available" errors.

[steve3d]

yes, I'm confirmed with this, on [email protected], I have to change the last line in these file node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js

from

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

to

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

after this change, everything works like before. the app no longer tells me that cordova.js is not loaded. and all native plugins works, and of course, the live reload and output to console both works.

[csotomon]

I have the same problem here

[SteveKennedy]

I made a Cordova hook that you can add to your config.xml. It will edit that file automatically (on Cordova prepare/build). 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

[camilochaves]

The answer below solved the livereload problem and I was able to run the apk on the device:
i changed the last line in these file node_modules/@ionic/app-scripts/dist/dev-server/serve-config.js
from
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'assets', 'www');
to
exports.ANDROID_PLATFORM_PATH = path.join('platforms', 'android', 'app/src/main', 'assets', 'www');

BUT.. there's always a but , when the program starts, is fetches some data using http and I am getting a CORS problem now which I don't have when I run without livereload
Failed to load http://XXX.XXX.XXX.XXX/api.php/TESTAPI: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.7:8100' is therefore not allowed access.
If I do not use livereload , everything works fine! I am guessing that, without livereload, the http request is made by the device and the http headers are properly configured for that, BUT, with livereload, every http request is done using my wifi router and somehow the pre-configured header inside the code Access-Control-Allow-Origin : * is somehow lost.
Any ideas?

[moczix]

have the same problem with http...

[ultimatetag]

I upgraded Ionic. It looks like they added both paths:
exports.ANDROID_PLATFORM_PATHS = [
path.join('platforms', 'android', 'assets', 'www'),
path.join('platforms', 'android', 'app', 'src', 'main', 'assets', 'www')
];

[steve3d]

yes, new version has fixed this problem.

As for livereload CORS, sometimes ionic uses a different port, so make sure you are allowing both port in your server.

[sarahsga]

I get this issue in an ionic v1 project. My ionic (-g) version is 3.20.0

[HighSoftWare96]

Excuse me folks but this issue is opened since 2017 and there is not an ufficial fix on this? This problem appears also with Ionic AppFlow live reload