Angular 19新项目出现unsupported-dynamic-import调试信息，是否正常？

问题描述 #

我用Angular 19创建了全新项目，仅在angular.json的serve区块添加了verbose选项，运行ng serve时控制台出现了一条调试信息，想确认这是否属于正常现象，以及有没有可行的解决方案。

CLI环境信息 #

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


Angular CLI: 19.1.0
Node: 23.1.0 (Unsupported)
Package Manager: npm 10.9.2
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1901.0
@angular-devkit/core         19.1.0
@angular-devkit/schematics   19.1.0
@angular/cli                 19.1.0
@schematics/angular          19.1.0

操作步骤 #

1. 创建项目：

ng new client

Which stylesheet format would you like to use? Sass (SCSS)

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

2. 修改angular.json的serve区块，添加verbose选项：

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "client:build:production"
            },
            "development": {
              "buildTarget": "client:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "verbose": true
          }
        },

运行ng serve后出现的调试信息 #

● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]

    src/app/app.component.ts:81:44:
      81 │ (() => { function AppComponent_HmrLoad(t) { import(/* @vite-ignore */
         ╵                                             ~~~~~~

解答 #

这是正常现象吗？ #

是正常的，完全不用担心。

这条信息来自Vite的调试日志，原因是Angular 19默认开启了**HMR（模块热替换）**功能，AppComponent_HmrLoad是Angular自动生成的HMR相关代码，里面的动态import带有/* @vite-ignore */注释——这个注释是告诉Vite不要处理这个导入，因为它是HMR运行时用来动态加载更新模块的，不需要被打包。

你开启了verbose选项后，Vite会输出更多调试级别的信息，包括这类被刻意忽略的动态导入提示，但这完全不影响项目的正常运行，也不是错误。

可行解决方案（如果想消除提示） #

如果觉得这条信息干扰视线，可以选以下任意一种方式处理：

• 关闭verbose模式：移除angular.json中serve.options里的"verbose": true，这样Vite就不会输出这类调试信息了。
• 禁用HMR：运行ng serve时加上--no-hmr参数，或者在angular.json的serve.options中添加"hmr": false，Angular就不会生成HMR相关的动态导入代码，自然就不会出现这条提示。

内容的提问来源于stack exchange，提问作者MMProud