Angular 20热重载失效求助：修改代码后需手动刷新浏览器

问题现象 #

修改应用内HTML等文件内容后，浏览器不会自动重载，必须手动按F5刷新页面才能看到变更。

项目配置信息 #

package.json #

"dependencies": {
    "@angular/common": "^20.3.0",
    "@angular/compiler": "^20.3.0",
    "@angular/core": "^20.3.0",
    "@angular/forms": "^20.3.0",
    "@angular/platform-browser": "^20.3.0",
    "@angular/router": "^20.3.0",
    ...
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular/build": "^20.3.24",
    "@angular/cli": "^20.3.24",
    "@angular/compiler-cli": "^20.3.0",
    "@types/jasmine": "~5.1.0",
    "angular-eslint": "20.7.0",
    "eslint": "^9.39.1",
    "jasmine-core": "~5.9.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",
    "prettier": "^3.8.3",
    "typescript": "~5.9.2",
    "typescript-eslint": "8.46.4"
  }

angular.json #

{
  ...
  "projects": {
    "<my-project>": {
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          ...
          },
          ...
        },
        "serve": {
          "builder": "@angular/build:dev-server",
          ...
        },
       ...     
      }
    }
  },
  ...
}

已尝试操作 #

安装@angular-devkit/build-angular包后，将build构建器替换为@angular-devkit/build-angular:application，serve构建器替换为@angular-devkit/build-angular:dev-server，但Angular 20新版本已不再依赖该devkit包，问题未解决。

解决建议 #

• 检查angular.json中serve配置的watch参数是否设为true，确保开启文件监听
• 清理Angular缓存：执行命令 ng cache clean，然后重启开发服务器
• 统一依赖版本：当前@angular/build版本为20.3.24，而核心框架依赖为20.3.0，版本不一致可能导致兼容性问题，执行npm update同步所有Angular相关依赖版本
• 确认启动命令：使用ng serve启动开发服务器，避免添加--no-watch等禁用热重载的参数
• 检查文件系统权限：确保项目目录有足够的读写权限，避免文件修改事件无法被监听
• 排查第三方干扰：暂时关闭杀毒软件、文件同步工具等，确认是否存在工具拦截文件变更事件
• 检查zone.js兼容性：确保zone.js版本与Angular 20兼容（建议使用官方推荐的~0.15.0版本，当前配置符合，但可尝试重新安装：npm install zone.js@~0.15.0）

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