Bunch of warnings: "The above dynamic import cannot be analyzed by Vite."

[rubiesonthesky]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18.*

Description

When running app, after Angular 19 update, the console is filled with these kind of warnings. It has taken me hours on and off to try to find the reason why it spams these warnings and how to get rid of them.

10:03:12 AM [vite] (client) warning:
/Users/user/angular-19/.angular/vite-root/angular-19/main.js
107|  (() => {
108|    function AppComponent_HmrLoad(t) {
109|      import(new URL("./@ng/component?c=src%2Fapp%2Fapp.component.ts%40AppComponent&t=" + encodeURIComponent(t), import.meta.url).href).then((m) => m.default && i0.\u0275\u0275replaceMetadata(AppComponent, m.default, [i0], [RouterOutlet]));
   |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
110|    }
111|    (typeof ngDevMode === "undefined" || ngDevMode) && AppComponent_HmrLoad(Date.now());
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.

  Plugin: vite:import-analysis
  File: /Users/user/angular-19/.angular/vite-root/angular-19/main.js

It seems that you could get rid of this warning by adding the comment like it says. But of course, it's not possible to add it since it's internal Angular thing. Turns out that the comment is there already but having tsconfig to remove the comments when compiling, broke this system.

Would it be possible

• Document this some where in update guide that you probably do not want to have removeComments on?
• Add it to the HRM warning message shown on start, that if removeComments is on, you should probably turn it off?
• Isn't there any more robust system to turn that analysis off that Angular could use? Relying on comments seems really easy to break. I get that it's just a warning and doesn't really break anything. But it's little bit scary that you got 100 of these warnings after upgrade.

Minimal Reproduction

You can reproduce this by creating new Angular project and adding "removeComments": true to tsconfig.json

Exception or Error

Your Environment

Angular CLI: 19.1.4
Node: 20.11.1
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.4
@angular-devkit/build-angular   19.1.4
@angular-devkit/core            19.1.4
@angular-devkit/schematics      19.1.4
@angular/cli                    19.1.4
@schematics/angular             19.1.4
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

No response

[alan-agius4]

We should likely set removeComments to false internally since removing comments in TypeScript isn’t necessary for this scenario. Non-essential comments will already be handled by the bundler. Furthermore, TypeScript’s comment removal is overly aggressive and can strip out important annotations, such as /* @__PURE__ */, which are vital for bundlers to properly eliminate dead code.

TL;DR: Avoid using TypeScript’s removeComments option, as it can inadvertently remove meaningful comments, potentially increasing your final bundle size.

[rubiesonthesky]

That sounds like the best option. Then users don't need to fiddle with their tsconfig. That settings is probably unnecessary in pure Angular project but it can creep up when you extend other tsconfigs.