super-productivity-android: Infinite loading when pointing to local angular webserver inside android emulator
đź‘» Brief Description
When running a local angular webserver with ng serve --host 0.0.0.0, and configuring the Android app to set url = "http://10.0.2.2:4200" inside the Android Studio emulator, the Android app should in theory request resources from the local webapp.
However, it does not work: the Android app stays in an infinite loading screen (with the “quote of the day”). However, the web app works fine in the emulator’s Android Chrome browser at the address http://10.0.2.2:4200. This suggests that either the webapp behaves differently if it’s the Android app, or it’s the Android app’s WebView component that is failing to properly process the webapp when it’s locally served.
I tried to debug, but no luck. I even tried to nullify these constants in the webapp:
export const IS_ANDROID_WEB_VIEW = false;
export const IS_F_DROID_APP = false;
To try to force the behavior to be the same between the Android app and Chrome browser, but it did not change anything.
Because of this issue, it is impossible currently to develop the webapp and Android app locally. The webapp needs to be uploaded on an online server before.
🥞 Action version
Same branch as #33. This PRÂ implements some bugfixes and updated instructions to launch the webserver locally and access it from inside the emulator, otherwise it would not even display in emulated Chrome browser.
🎩 workflow configuration
Android 11 (emulated on a Pixel 3a phone). Host computer: Windows 10 x64.
Steps To Reproduce
Steps to reproduce the behavior:
- git clone super-productivity and npm install etc
- ng serve --host 0.0.0.0
- launch the Android app in Android Studio’s emulator
- the app should be stuck in an infinite loop
- launch Chrome browser inside the Android emulator, and type
http://10.0.2.2:4200. This should work fine.
đźš“ Expected behavior
The Android app should get redirected to “Today” tab after loading.
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 16 (16 by maintainers)
Fixed in https://github.com/johannesjo/super-productivity/pull/2453 using a polyfills import.
/EDIT: I thought so but after some more testing, no, polyfills imports don’t fix this issue. It just sometimes work, and sometimes it doesn’t. It’s a heisenbug.
/EDIT2: Sometimes, uncommenting all imports before zone in
src/polyfills.tsdoes seem to help, and others not, it’s too unreliable to commit, but may be worth a shot for developers experiencing this issue.Ok that’s interesting.
It’s not an issue with the emulator I think, since Chrome browser inside the emulator works fine, and that I can reproduce the issue on my host computer outside of the emulator, while you can’t.
So maybe this is a regression in nodejs v18, or either it’s a bug that is specific to my platform (Windows 10), or a combination of both, or it’s a very rare bug that has to do with my hardware for some reason (maybe Intel HAXM version has something to do with it). In any case at this point it becomes too costly to debug further, so this workaround will have to do. If others experience a similar issue, they can hopefully find the solution outlined in the current issue.
Yes I did. It took ages, but it did load.
Maybe for whatever reason the internet is slowed down for your emulator e.g. by a setting to do so?
So I tried a few other commands, here is the one that worked best:
In one terminal, launch:
npm run buildFrontend:prod:watchIn the other one, launch:
http-server ./dist -p 4200 -t0The
-t0disables timeouts, and thebuildFrontend:prod:watchcommand essentially does ang build --configuration production --watch.This combination seems to work relatively fine and rebuilds automatically on changes in the webapp, although it’s slow to rebuild.
I’ll close the issue, I leave it up to you to see if it’s pertinent to add this info in the README (I would suggest to do that if you are not using the Android emulator, because I suspect everyone using the AVD emulator will have the same issue).
/EDIT: Sometimes it works, sometimes it doesn’t, try to close and relaunch both commands in terminals to clean up the cache, but sometimes it just does not want to work, especially with Android 11+ and with a big Super Productivity database.