Infinite loading when pointing to local angular webserver inside android emulator about super-productivity-android

[lrq3000]

Fixed in johannesjo/super-productivity#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.ts does seem to help, and others not, it's too unreliable to commit, but may be worth a shot for developers experiencing this issue.

[lrq3000]

So I tried a few other commands, here is the one that worked best:

In one terminal, launch:

npm run buildFrontend:prod:watch

In the other one, launch:

http-server ./dist -p 4200 -t0

The -t0 disables timeouts, and the buildFrontend:prod:watch command essentially does a ng 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.

[johannesjo]

Did you try to launch the local webapp with:

ng serve

And then access it with a Chrome browser on a computer (not even inside the emulator and not using chrome://inspect, just access via http://localhost:4200) with settings: Chrome DevTools > Network > enable "Disable Cache" and set Throttling to Slow 3G ?

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?

[lrq3000]

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.

[johannesjo]

Somehow this slipped past me, sorry. Not sure what is going on tbh. I am unable to reproduce this. I assume navigating to http://localhost:4200 in the browser just works fine there without the infinite loop? I am also curious why you need to put --host 0.0.0.0. Normally it should not be necessary and work just fine when being served from localhost directly. I tried with Android Version 11 and 10. So that shouldn't be the cause.

You can gain more insight by debugging the webframe in a chrome browser. Open the app as described above. Then open your browser and go to chrome://inspect/. There you should find the webview listed. Click on inspect below it and then navigate to console and ideally post the output here. Maybe the app is in some invalid state. You can wipe all data by navigating to Application and by clicking on Clear site data (or just wipe the android app completely).

[lrq3000]

It seems that on some computers, the angular cli gets confused with which adapter to attach to, even though i disabled all but my real wifi card, so --host 0.0.0.0 fixes this issue by instructing the server to ttach to all adapters, it's a common fix for hosting relted apps in general, a lot of other webtools implement a similar argument.

About your suggestion to inspect with chrome, I'm not sure it will help? The webapp: works with Chrome on host computer (Windows 10), works in Chrome Mobile inside the emulator, does NOT work in the Super Productivity Android app (i also tested using a simple generic webview, so it's not the Super Productivity Android app per se that is failing). So i would need a way to debut the webapp from inside the android webview, I'm not sure how to do that?

It's worth noting that both my nodejs and Android Studio installs are fresh, they were done pretty much to work on Super Productivity Android and another similar Android app.

[lrq3000]

Ah and it's worth noting the issue only happens with the Super Productivity webapp, probably because of an issue with Angular. I tried to use another local webserver, Xampp, and it gets accessed fine inside the Android webview.

[lrq3000]

@johannesjo ok sorry I did not know about chrome://inspect, I thought it was just another way to access DevTools, but it actually can help in debugging WebViews remotely. I'm reading some tutorials and I will try to debug further, thank you for the tip.

[lrq3000]

Here is the log:

Warnings:

polyfills.js:6438 [webpack-dev-server] Live Reloading enabled.
polyfills.js:6443 [webpack-dev-server] Warnings while compiling.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING in ./src/styles.scss (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(6196:3) autoprefixer: end value has mixed support, consider using flex-end instead
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/CONFIG.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/backup.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/better-ipc.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/debug.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/error-handler-with-frontend-inform.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/full-screen-blocker.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/get-settings.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/indicator.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/jira.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/local-file-sync.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/lockscreen.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/main-window.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/main.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\node_modules\ng2-charts\fesm2015\ng2-charts.js depends on 'chart.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\node_modules\ng2-dragula\dist\fesm2015\ng2-dragula.js depends on 'dragula'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'new-github-issue-url'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'p-throttle'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'stacktrace-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\language\language.service.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\caldav\caldav-client.service.ts depends on '@nextcloud/cdav-library'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\caldav\caldav-client.service.ts depends on 'ical.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\jira\jira-api.service.ts depends on 'query-string'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\reminder\reminder.module.ts depends on 'helpful-decorators'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\worklog\worklog-export\worklog-export.component.ts depends on 'clipboard'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\worklog\worklog-export\worklog-export.component.ts depends on 'moment-duration-format'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\imex\sync\web-dav\web-dav-api.service.ts depends on 'webdav/web'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\ui\pipes\jira-to-markdown.pipe.ts depends on 'jira2md'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\util\download.ts depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6438 [webpack-dev-server] Disconnected!
polyfills.js:6438 [webpack-dev-server] Trying to reconnect...
polyfills.js:6438 [webpack-dev-server] Live Reloading enabled.
polyfills.js:6443 [webpack-dev-server] Warnings while compiling.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING in ./src/styles.scss (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(6196:3) autoprefixer: end value has mixed support, consider using flex-end instead
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/CONFIG.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/backup.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/better-ipc.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/debug.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/error-handler-with-frontend-inform.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/full-screen-blocker.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/get-settings.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/indicator.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/jira.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/local-file-sync.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/lockscreen.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/main-window.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:/git/super-productivity/electron/main.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\node_modules\ng2-charts\fesm2015\ng2-charts.js depends on 'chart.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\node_modules\ng2-dragula\dist\fesm2015\ng2-dragula.js depends on 'dragula'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'new-github-issue-url'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'p-throttle'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\error-handler\global-error-handler.util.ts depends on 'stacktrace-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\core\language\language.service.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\caldav\caldav-client.service.ts depends on '@nextcloud/cdav-library'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\caldav\caldav-client.service.ts depends on 'ical.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\issue\providers\jira\jira-api.service.ts depends on 'query-string'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\reminder\reminder.module.ts depends on 'helpful-decorators'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\worklog\worklog-export\worklog-export.component.ts depends on 'clipboard'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\features\worklog\worklog-export\worklog-export.component.ts depends on 'moment-duration-format'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\imex\sync\web-dav\web-dav-api.service.ts depends on 'webdav/web'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\ui\pipes\jira-to-markdown.pipe.ts depends on 'jira2md'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
polyfills.js:6443 [webpack-dev-server] WARNING
C:\git\super-productivity\src\app\util\download.ts depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
logger @ polyfills.js:6443
DevTools failed to load SourceMap: Could not load content for http://10.0.2.2:4200/runtime.js.map: Unknown error
DevTools failed to load SourceMap: Could not load content for http://10.0.2.2:4200/polyfills.js.map: Unknown error
DevTools failed to load SourceMap: Could not load content for http://10.0.2.2:4200/styles.js.map: Unknown error
DevTools failed to load SourceMap: Could not load content for http://10.0.2.2:4200/styles.css.map: Unknown error

Errors:

:4200/main.js:1 Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
:4200/vendor.js:1 Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
:4200/assets/icons/favicon-192x192.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:4200/assets/icons/favicon-32x32.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:4200/assets/icons/favicon-16x16.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)

[lrq3000]

It seems the issue is caused by Angular timeouting the download because the AVD emulator has a too slow internet, and the angular's vendor.js is too big (the main.js error gets cleared if we enable the production environment with enableProdMode(); in main.ts in Super Productivity web app.

It seems to be a known issue with Angular: angular/angular-cli#7197

I'm trying to see if there is a way to increase the timeout delay.

[lrq3000]

But note that this suggests that this issue affects not only those running the Android app inside the emulator, but anybody who tries to access the Super Productivity web app from a limited internet connection.

[lrq3000]

I can confirm this is associated with having a slow internet connection. I can reproduce the error on my host computer using Chrome DevTools > Network > enable "Disable Cache" and set Throttling to 3G, then reload the page, it should fail with the same error on main.js or vendor.js after some time (less than 5min).

This happens only for localhost app, despite being run in production mode. It does not happen with https://app.super-productivity.com.

[johannesjo]

Hmhm. I am still unable to reproduce this. What you might try is to serve the compiled output rather than the dev files. You can do so by installing http-server via npm i -g http-server and then:

npm run buildFrontend:prod:es6 # to build the app files
http-server ./dist -p 4200 # to run a server for the compilated files

This will lead to much smaller files and possibly might fix the problem. I however don't understand why this might happen. Maybe for some reason your emulator blocks loading the files? Not sure....

[lrq3000]

Thank you for your suggestion @johannesjo , yes these commands work right away! So this confirms the issue: for some reason, the WebView running inside an emulator is too slow to download the angular files before receiving a timeout.

Out of curiosity, are you testing inside an emulator (if so, which? AVD or the other one?) or only on a physical device?

I tested further, and there is an app WebView Browser Tester that is provided inside the emulated Android image, and just like the Super Productivity Android app, it fails. However, the Chrome browser inside the emulator works fine. So this bug appears to affect only WebViews.

My hypothesis is that this only happens to WebViews because they always run in a debugger inside the emulator (whether or not we use the debug command), so this slows down all the requests done by WebViews. This would also explain why the Chrome mobile app is not affected inside the emulator.

Anyway, please leave this issue open for a bit longer, I'm going to try to find adequate commands to dynamically rebuild/watch the minified webapp, so that we will have an OKish setup for other devs running into the same issue as me.

[johannesjo]

I am glad that it kind of works now! I much prefer that you spent your time on more important things :-D Thank you very much for your contributions :)

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).

That's the thing. I am also using the AVD Emulator and I don't run into the same issue. Maybe it's the dev server messing up on your system for some reason? What version of node are you using (on my system it's 16.17.0)? And how fast does do the errors show up? Is it that loading is very slow for some reason (which would explain why you could reproduce the same error when using network throttling) or is it that the errors show up right away and the dev server is maybe giving wrong meta information (such as ERR_CONTENT_LENGTH_MISMATCH)?

[lrq3000]

Thank you for your help in troubleshooting this issue! Yes me too I'd prefer not to have these issues, guess I'm just unlucky, especially given I am NOT a nodejs programmer, it's strange I get these errors on a clean install :-/ (BTW even my Android Studio install is fresh, I did not code for Android in years, never on my current computer). But at least I guess I've learnt something!

Strange that you use the AVD Emulator and don't run into the same issue.

I use nodejs v18.13.0.

The errors show up after a couple of minutes (which I think corresponds to the timeout setting somewhere in nodejs), but only in the console. In the SuperProductivity UI, it stays stuck on the loading screen with the "motivational quote of the day".

Did you try to launch the local webapp with:

ng serve

And then access it with a Chrome browser on a computer (not even inside the emulator and not using chrome://inspect, just access via http://localhost:4200) with settings: Chrome DevTools > Network > enable "Disable Cache" and set Throttling to Slow 3G ?

I previously wrote that the error was reproducible inside the production build but I was wrong, I did not know about the npm run commands, I only manually switched the flags inside the app, that's different (eg, no minification). Also, I forgot to write that Throttling needs to be set to Slow 3G, not just 3G. And it's important to disable cache and refresh the page, because otherwise it will reuse the cache even if the throttling was set to slow 3G.

The above is how I can reproduce the error outside the emulator approximatively the same, although it's slightly different (the timeout takes more time than inside the emulator for some reason, maybe because the webagent is different) but it's the same result.