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
- Ionic capacitor build
- 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] @email@example.com [capacitor] @firstname.lastname@example.org [capacitor] @email@example.com [capacitor] @firstname.lastname@example.org [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:
- 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.
- since I ran the build command manually, thus my android folder is up to date
- 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
- Usage of LocalStorage [and not DB] is incorrectly configured in my capacitor config, but don’t know if I should touch it.