Angular 10, sometimes fails to fully load vendor.js and main.js

[Elad Volpin]

Hi,

Sometimes our Angular app seems to load a blank page with console errors implying that the js files have not been loaded in full.

Such errors could be for example: "Uncaught SyntaxError: Unexpected end of input'", or "Uncaught SyntaxError: Invalid or unexpected token" etc.

Looking in Devtools (F12) network tab I can see that the file returns 200 OK but the file seems indeed to be only partially downloaded. If I try to manually download it using a new tab then the file downloads in full.

And again this is not a constant problem and happens from time to time. We noticed that it may be regional as it seems more frequent in some locations more than others. In some regions the vendor.js and main.js take 2 seconds to download each and in the more problematic locations it could take 5-6 seconds each. So one suspicion is that it is some sort of timeout on the loading of scripts.

BTW those scripts are gzipped around 500KB and 700KB in size.

Any idea how to solve this problem? If this is indeed some timeout for loading the script is there a way to increase this timeout?

[Elad Volpin]

If this is relevant to anyone, for now we managed to workaround using the following:

1. set gzip compression to 9 (max)
2. removed --vendor-chunks from ng build (according to the docs, vendor-chunks switch is only for development)

[Elad Volpin]

UPDATE: the timeout problem was on the server-side. On Ambassador, the default timeout_ms for a request is 3 seconds: https://www.getambassador.io/docs/edge-stack/latest/topics/using/timeouts/#request-timeout-timeout_ms