Upgraded to Angular 19, Dynamic imports do not work

[AmitMY]

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

Don't known / other

Is this a regression?

Yes

Description

I upgraded from 18 to 19 using the upgrade command, which also switched me from browser to application.
After some modifications I managed to make everything run, except for dynamic imports.

My code has a lot of large modules, that are dynamically imported like so:

      const {defineCustomElements} = await import(/* webpackChunkName: "pose-viewer" */ 'pose-viewer/loader');
      defineCustomElements();

(Removing the /* webpackChunkName: "pose-viewer" */ does not help, but I would also like that supported ideally)

Please provide a link to a minimal reproduction of the bug

sign/translate#177 - Can't provide something minimal, as this is the app that was upgraded

Please provide the exception or error you saw

TypeError: Failed to fetch dynamically imported module: http://localhost:4200/@fs/Users/amitmoryossef/dev/sign/translate/.angular/cache/19.0.0/sign-translate/vite/deps/pose-viewer.entry.js?import undefined

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

Angular CLI: 19.0.0
Node: 22.0.0
Package Manager: npm 10.5.1
OS: darwin arm64

Angular: 19.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0
@angular-devkit/build-angular   19.0.0
@angular-devkit/core            19.0.0
@angular-devkit/schematics      19.0.0
@schematics/angular             19.0.0
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else?

No response

[alan-agius4]

Hi @AmitMY, I tested the application locally and couldn't replicate the error. The behavior you're seeing with webpackChunkName not working is expected, as it's a webpack-specific feature that has never been supported by the Angular CLI.

[AmitMY]

Reproduction video with the above repository.
https://github.com/user-attachments/assets/2f166d55-4bc6-46bd-9856-8276ca72b2e3

My apologies for not making it easier to reproduce.

[alan-agius4]

This issue appears to be coming from the pose-viewer library which is not compatible with Vite

/usr/local/translate/.angular/cache/19.0.0/sign-translate/vite/deps_ssr/pose-viewer_loader.js  
1045|      return i[t];  
1046|    }  
1047|    return import("./".concat(a, ".entry.js").concat("")).then(function(e2) {  
   |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  
1048|      {  
1049|        cmpModules.set(a, e2);  
The above dynamic import cannot be analyzed by Vite.  
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.  

As a workaround, you can exclude this library from being prebundled by updating the configuration as shown below:

"serve": {  
  "builder": "@angular-devkit/build-angular:dev-server",  
  "options": {  
    "headers": {  
      "Cross-Origin-Opener-Policy": "same-origin",  
      "Cross-Origin-Embedder-Policy": "require-corp"  
    },  
    "prebundle": {  
      "exclude": ["pose-viewer", "pose-viewer/loader"]  
    },  
    "buildTarget": "sign-translate:build"  
  }  
}  

[angular-automatic-lock-bot]

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