Getting a White screen on the android Emulator

Capacitor
1

I am trying to test my Vue app on the Android Emulator… I followed the documentation from the capacitor’s website for “Using Capacitor with Ionic Framework”
My Flow is as follows

  1. Ionic capacitor build
  2. Then use ionic capacitor run -l --external

Here is what I get in the IDE console…

ionic capacitor run -l --external          
? What platform would you like to run? android
? Which device would you like to target? Pixel 2 API 28 (emulator) (Pixel_2_API_28)
> capacitor.cmd sync android
[capacitor] √ Copying web assets from dist to android\app\src\main\assets\public in 720.60ms
[capacitor] √ Creating capacitor.config.json in android\app\src\main\assets in 9.20ms
[capacitor] √ copy android in 835.23ms
[capacitor] √ Updating Android plugins in 31.69ms
[capacitor] [info] Found 4 Capacitor plugins for android:
[capacitor]        @capacitor/app@1.0.1
[capacitor]        @capacitor/haptics@1.0.1
[capacitor]        @capacitor/keyboard@1.0.1
[capacitor]        @capacitor/status-bar@1.0.1
[capacitor] √ update android in 544.50ms
[capacitor] [info] Sync finished in 1.384s
> vue-cli-service.cmd serve
[vue-cli-service]  INFO  Starting development server...

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.1.2:8100

       Use Ctrl+C to quit this process

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/
[vue-cli-service]   - Network: http://192.168.1.2:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.
> capacitor.cmd run android --no-sync --target Pixel_2_API_28
[capacitor] √ Running Gradle build in 7.89s
[capacitor] √ Deploying app-debug.apk to Pixel_2_API_28 in 10.18s

[INFO] App deployed to device!

       Development server will continue running until manually stopped.

       Use Ctrl+C to quit this process

Clearly, my app is up and running, Runs on the web mode, However on my Emulator i only get a white screen when I open the dev tool using chrome://inspect/#devices I get the following error

chunk-vendors.js:1 Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

Any Pointer what am I doing wrong here

Here is the thing I rule out:

  1. All the action in my Vue app point to a https://appname.heroku.com which works if use the webapp so I know that --external is not looking for localhost.
  2. since I ran the build command manually, thus my android folder is up to date
  3. I did not make any changes in the code after the build was made, so it is Production-ready so to say.

What I think might be a issue but not sure

  1. Usage of LocalStorage [and not DB] is incorrectly configured in my capacitor config, but don’t know if I should touch it.
2

Solved it… classic mistake… i used
ionic capacitor run -l --external
while I shud have used…
npx capacitor run android -l --external

3

-l --external does nothing in capacitor command, those are for ionic command only, so it might be working but it’s not using live reload

4

@jcesarmobile sorry for the late reply… just that I landed on this thread today and saw your comment. the issue was fixed by using npx instead of ionic cap for some reason switching the command the build worked as expected but if I tried using it with the latter it always failed…