Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task done
rubiesonthesky opened this issue Jan 24, 2025 · 3 comments · Fixed by #29474
Closed
1 task done

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

rubiesonthesky opened this issue Jan 24, 2025 · 3 comments · Fixed by #29474
Assignees

Comments

@rubiesonthesky
Copy link

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
Copy link
Collaborator

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
Copy link
Author

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.

@alan-agius4 alan-agius4 self-assigned this Jan 24, 2025
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Jan 24, 2025
Disables TypeScript's `removeComments` option to ensure important annotations like `/* @__PURE__ */`
and `/* vite-ignore */` are preserved. TypeScript's comment removal can be too aggressive,
potentially stripping out critical information needed by bundlers for dead code elimination.
Non-essential comments will be handled by the bundler, so removing them in TypeScript isn't necessary
and could lead to an increase in the final bundle size.

Closes angular#29470
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Jan 24, 2025
Disables TypeScript's `removeComments` option to ensure important annotations like `/* @__PURE__ */`
and `/* vite-ignore */` are preserved. TypeScript's comment removal can be too aggressive,
potentially stripping out critical information needed by bundlers for dead code elimination.
Non-essential comments will be handled by the bundler, so removing them in TypeScript isn't necessary
and could lead to an increase in the final bundle size.

Closes angular#29470
alan-agius4 added a commit that referenced this issue Jan 24, 2025
Disables TypeScript's `removeComments` option to ensure important annotations like `/* @__PURE__ */`
and `/* vite-ignore */` are preserved. TypeScript's comment removal can be too aggressive,
potentially stripping out critical information needed by bundlers for dead code elimination.
Non-essential comments will be handled by the bundler, so removing them in TypeScript isn't necessary
and could lead to an increase in the final bundle size.

Closes #29470

(cherry picked from commit 1a3ef3b)
@angular-automatic-lock-bot
Copy link

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-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 24, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants