Angular 17热模块重载停在'reloading client(s)'无法刷新页面

数据老陈

2026-7-6

Angular 17 HMR失效问题及降级到16的方案

一、是否是Angular 17的问题？

是的，Angular 17发布初期存在部分HMR（热模块重载）相关的已知bug，尤其是在默认创建的独立应用项目中，修改模板文件后，构建系统可能误判文件未变更（终端显示Unchanged output files: 2），导致HMR无法正确触发页面刷新。这类问题属于版本初期的兼容性问题，后续补丁版本可能修复，若需要稳定开发环境，降级到Angular 16是可行方案。

二、便捷降级到Angular 16的步骤

方法1：使用Angular CLI批量降级（推荐）

在项目根目录执行以下命令，CLI会自动同步所有Angular核心依赖、开发依赖到16.x最新稳定版：

ng update @angular/cli@16 @angular/core@16 --force

注：--force参数用于强制处理版本冲突，确保所有依赖同步降级。

方法2：手动修改配置后重新安装

打开项目根目录的package.json，将所有@angular/开头的依赖版本从^17.0.0改为^16.2.0，同时将typescript版本调整为~5.1.6（Angular 16兼容的TS版本），修改后的依赖部分如下：

"dependencies": {
  "@angular/animations": "^16.2.0",
  "@angular/common": "^16.2.0",
  "@angular/compiler": "^16.2.0",
  "@angular/core": "^16.2.0",
  "@angular/forms": "^16.2.0",
  "@angular/platform-browser": "^16.2.0",
  "@angular/platform-browser-dynamic": "^16.2.0",
  "@angular/router": "^16.2.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.13.3"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^16.2.0",
  "@angular/cli": "^16.2.0",
  "@angular/compiler-cli": "^16.2.0",
  "@types/jasmine": "~4.3.0",
  "jasmine-core": "~4.6.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.2.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.1.0",
  "typescript": "~5.1.6"
}