error: TypeError: Failed to fetch dynamically imported module: https://localhost/chunk-5YE56RPK.js)

[pjc2007]

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

router

Is this a regression?

Yes

Description

I have just finished updating my Ionic/Angular application to Angular 20.3.0 and also to standalone. Being an Ionic application, I run this on Android, iOS, and Windows , i.e. inside of WebViews.

After my updating, and testing on a real Android device, as well as the emulator, I now get error: TypeError: Failed to fetch dynamically imported module: https://localhost/chunk-5YE56RPK.js) on two of my routes. All the others work, and I have never had this before. Also, this does NOT occur if I build in non release.

I have added WebView.setWebContentsDebuggingEnabled(true); to my Android main activity so I can attach and debug using chrome://inspect/#devices

I uncompressed my .apk and can see that the chunk-5YE56RPK.js is there.

I can get the breakpoint stopping at the error, but because everything is so async, I just cannot find where it is trying to load the .js file. I have cloned the Angular repo, but cannot find the string "Failed to fetch dynamically imported module" anywhere, so I can try and find it while debugging and put a breakpoint near it.

My routes are lazy loaded, here is one of them that is failing

{
  path: Constants.vals.pageRoutePaths.performance,
  loadChildren: () => import('./performance/performance.routes').then((r) => r.routes),
 }

And then

export const routes: Routes = [
{
  path: '',
  component: PerformancePage,
  providers: [CanDeactivateGuard],
  canDeactivate: [CanDeactivateGuard],
},
];

Logging out the routing events I see

00000292    32.07667160 [11508] [DEBUG] MyApp - 6c0972eb102e11cd - AppRoutingService: Router event NavigationStart(id: 20, url: '/performance') 
00000293    32.07699203 [11508] [DEBUG] MyApp - 6c0972eb102e11cd - AppRoutingService: Router event RouteConfigLoadStart(path: performance)  
00000294    32.07778549 [11508] [DEBUG] MyApp - 6c0972eb102e11cd - AppRoutingService: Router event NavigationError(id: 20, url: '/performance', error: TypeError: Failed to fetch dynamically imported module: https://localhost/chunk-5YE56RPK.js) 

I do load with no reloading (otherwise I don't see the point of lazy modules)

provideRouter(routes, withPreloading(NoPreloading)),

So I am at a loss on how to further diagnose this, and it has never happened before, all works fine when running as ng serve, and also work on the Android when built in non production.

Please provide a link to a minimal reproduction of the bug

Do not know how to reproduce, only seen in my larger production app

Please provide the exception or error you saw

error: TypeError: Failed to fetch dynamically imported module: https://localhost/chunk-5YE56RPK.js)

It is a very deep callstack, so I think by the time we get here is is a queued error

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

development@Mac-mini connect % ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    


Angular CLI: 20.3.1
Node: 22.18.0
Package Manager: npm 10.9.3
OS: darwin arm64
    

Angular: 20.3.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------
@angular-devkit/architect       0.2003.1
@angular-devkit/build-angular   20.3.1
@angular-devkit/core            20.3.1
@angular-devkit/schematics      20.3.1
@angular/cdk                    20.2.3
@angular/cli                    20.3.1
@schematics/angular             20.3.1
rxjs                            7.8.2
typescript                      5.9.2
zone.js                         0.15.1

Anything else?

Anyway to diagnose this, where in the router code I can put a breakpoint, ie where does it try and do this fetch, so I can see if I see anything.

[JoostK]

This is a browser error that occurs when an ECMAScript module cannot be loaded. There's likely more information in the Networks tab. The file may be missing (even though you mention it's present in the APK, perhaps it isn't accessible for some reason) or its Content-Type may not be text/javascript, or perhaps there's alternative reasons for the failure (CORS restrictions may be another).

This is unlikely an Angular problem, given that this is native JS behavior for dynamic imports.

[JeanMeche]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[pjc2007]

This is a browser error that occurs when an ECMAScript module cannot be loaded. There's likely more information in the Networks tab. The file may be missing (even though you mention it's present in the APK, perhaps it isn't accessible for some reason) or its Content-Type may not be text/javascript, or perhaps there's alternative reasons for the failure (CORS restrictions may be another).

This is unlikely an Angular problem, given that this is native JS behavior for dynamic imports.

Ok, yes the network tab shows me the 2 failing routes have an import to another "chunk.js" file, which is giving a 404. Looking at this chunk.js file, it is completely empty, 0 bytes. So it may be due to the new builder I swapped to.

A search gives me

An Angular build creating empty or malformed chunk.js files, particularly in production builds, can lead to application loading failures and "Failed to load module script" errors in the browser. This issue often arises after updates to Angular or when using the new @angular/build:application builder.

Angular Version and Builder Issues:
Outdated packages: Running npm update can resolve issues related to outdated Angular packages or dependencies that might be causing build inconsistencies.

New @angular/build:application builder: This builder, while recommended, has been reported to sometimes produce empty chunks. Ensure you are using a stable version of @angular/build. If issues persist, consider reporting them on the Angular CLI GitHub repository.

[JoostK]

That "search" comes across as AI-generated, and I'm not aware of "has been reported to sometimes produce empty chunks" so that may be inacurrate. I don't know what is happening here and I suspect that Ionic may have its own builder (?), so it's even unclear to me if @angular/build:application is in use at all.

[pjc2007]

That "search" comes across as AI-generated, and I'm not aware of "has been reported to sometimes produce empty chunks" so that may be inaccurate. I don't know what is happening here and I suspect that Ionic may have its own builder (?), so it's even unclear to me if @angular/build:application is in use at all.

Ok yes, it was AI generated, so I should have taken it with a grain of salt. I will look into what Ionic do.. I do get an empty chunk running ng build with the production flag, but maybe something else hooks into For now I am using my own post build script to remove any imports to empty files and that fixes my issue.

[JoostK]

ng build leaves most of the actual building work to the builder that has been configured in angular.json, so I'd start looking there to see which builder is being used.