Intermittent module load errors in Firefox only

karptonite commented 2 months ago

Which @angular/* package(s) are the source of the bug?

compiler-cli, platform-browser-dynamic

Is this a regression?

No

Description

Periodically, users of the Firefox browser will report that our Angular site will stop working for them. Console errors from users reporting this problem show module loading issues, in the following format:

Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-7VTT4A6L.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-KRXMVMZV.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-UOJLIIXE.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-UKMIOM3P.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-JIBBZ5SB.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-SFTBLGAN.js”. [boardgamegeek.com](http://boardgamegeek.com/)
Loading failed for the module with source “https://cf.geekdo-static.com/frontend/chunk-LYULK75U.js”. [boardgamegeek.com](http://boardgamegeek.com/)

The listed files are accessible, and can be loaded fine from CDN.

In order to make the site work again, users have reported that they have to go into their Firefox settings, and clear their cache for the past day. (A hard reload with Ctrl-F5 does not help). Also, going into a private window seems to help.

Beyond that, I've never been able to reproduce this issue myself (the site is BoardGamegGeek) but the reports are quite consistent, if not super frequent. It may be the case that some users run into this problem more than other users, but I can't say that for sure. The fact that cache clearing solves the issue seems to suggest that something about how Firefox is caching is causing it to cache some corrupt file, with cascading consequences, but that is purely conjecture on my part.

This may be related to angular/angular#44780, which we also reported, although note that that dates back to when Angular was using Webpack.

Please provide a link to a minimal reproduction of the bug

It is possible that you might run into this browsing the Angular portions of https://boardgamegeek.com

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 18.2.1
Node: 18.20.4
Package Manager: yarn 1.22.22
OS: darwin arm64

Angular: 18.2.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.15.0

Anything else?

No response

clydin commented 2 months ago

From the site linked above, it appears that the Content-Type header for the JavaScript files is being sent as application/javascript. This a legacy type and is not guaranteed to be supported on browsers. JavaScript files should use text/javascript. More details can be found here: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Configuring_server_MIME_types

This may or may not solve the problem but it is something that should ideally be corrected either way.

karptonite commented 2 months ago

@clydin Thanks for the suggestion! We've updated all of our JS files (at least the ones we control) to have the correct content type. While I'll be surprised if this helps, it certainly doesn't hurt to get this correct.

alan-agius4 commented 2 months ago

Thanks for raising this issue, but I highly doubt Angular is the cause, especially since esbuild uses standard ECMA imports to load the chunks.

karptonite commented 2 months ago

@alan-agius4 You could be right, but I forgot to mention one relevant thing: Our site is a hybrid--roughly half of it is Angular, and half is not. This problem has only ever occurred on the Angular part of the site. It may not be that Angular is at fault, but if something else is at fault--a plugin, or Firefox itself--the problem seems to a be specific to Angular, and whether is is Firefox or Angular at fault, it seems that "Angular not working on Firefox" would be of interest.

I'll report this issue to Firefox as well, though. Edit: hah, I forgot that I already had an open issue for this with Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1756471

angular-automatic-lock-bot[bot] commented 1 month ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / angular-cli