Getting a ChunkLoadError in Angular 13 when the application is deployed, but the chunk exists-CodePudding

We have an application that was originally on Angular 11 and got upgraded to 13. The application runs fine with 'ng serve' on local machine, but as soon as it's deployed to our Azure app service the application fails to load the lazy loaded modules. The error is a ChunkLoadError (timeout) and it provides the name of the file that it couldn't load - clicking on the file takes me right to the file which has content.

Pretty much every question/solution I have come across has to do with the chunk files not existing because the application was changed but the cache was still pointing at the old chunk files. In my case the files do exist but for some reason the load fails.

Excerpt from our main routing config:

     path: 'app', component: AppContainerComponent, canActivateChild: [OktaAuthGuard],
       children: [
        {
          path: 'dashboard',
          loadChildren: dashboardModule
        },

Error:

ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 817 failed.
(timeout: https://example.org/817.db7e09935e1b6a3b.js)
ChunkLoadError: Loading chunk 817 failed.
(timeout: https://example.org/817.db7e09935e1b6a3b.js)
    at r.f.j (runtime.980b937f2a57cd22.js:1:2660)
    at runtime.980b937f2a57cd22.js:1:845
    at Array.reduce (<anonymous>)
    at r.e (runtime.980b937f2a57cd22.js:1:824)
    at loadChildren (main.a0466523bce8e6ce.js:1:524541)
    at Xi.loadModuleFactory (main.a0466523bce8e6ce.js:1:3287175)
    at Xi.load (main.a0466523bce8e6ce.js:1:3286812)
    at main.a0466523bce8e6ce.js:1:3313088
    at ct.preload (main.a0466523bce8e6ce.js:1:3312029)
    at ut.preloadConfig (main.a0466523bce8e6ce.js:1:3313016)
    at Pt (polyfills.c77665f988682a29.js:1:16778)
    at Pt (polyfills.c77665f988682a29.js:1:16304)
    at polyfills.c77665f988682a29.js:1:17645
    at W.invokeTask (polyfills.c77665f988682a29.js:1:7920)
    at Object.onInvokeTask (main.a0466523bce8e6ce.js:1:3093065)
    at W.invokeTask (polyfills.c77665f988682a29.js:1:7841)
    at lt.runTask (polyfills.c77665f988682a29.js:1:3277)
    at k (polyfills.c77665f988682a29.js:1:9977)
    at invokeTask (polyfills.c77665f988682a29.js:1:9009)
    at G.invoke (polyfills.c77665f988682a29.js:1:8880)

I've tried reloading the app multiple times, using PreloadAllModules, still the error persists. It is not an immediate error either, it takes something like 30 seconds or more for the error to appear - until then the app just sits there.

This may be similar to this question: Webpack code splitting: ChunkLoadError - Loading chunk X failed, but the chunk exists

because the chunks do seem to exist in both cases. In my case, however, I'm not getting the reports in the error logs, I'm actually seeing them in the console because the app fails to load properly. I also did not see an actual resolution, just another response for "the file probably doesn't exist so you should reload it", which in this case is not the issue.

CodePudding user response：

For anyone that may stumble on this question in the future, I figured out my problem. Our application uses a tool called Osano, which is meant for managing privacy and cookie policies. Part of its job is to let users consent to scripts and cookies the site uses. Once a site is live, no new scripts are allowed to run until they have been put on the whitelist.

In my case this was preventing these chunk files from loading even though they existed on disk. Our policy for local dev and deployed must just be different, which is why it was allowing it to run locally.