Angular项目从旧版本升级到17后Hot-Reload问题排查求助

潜在原因及对应排查步骤 #

• CLI 版本与项目配置不兼容
  升级后可能残留旧版本 angular.json 配置，检查 serve 节点下的 liveReload 字段是否设为 true：

  "serve": {
    "options": {
      "liveReload": true
    }
  }
  

  同时验证全局与本地 Angular CLI 版本一致：

  ng --version
  npm list @angular/cli
  

• Vite 构建工具配置冲突
  Angular 17 默认替换 Webpack 为 Vite，热重载依赖 Vite 的文件监听机制。若项目有自定义 vite.config.ts，确认未覆盖默认监听规则；若无则尝试清理依赖后重装：

  rm -rf node_modules package-lock.json
  npm install
  

• 文件系统监听限制
  部分系统对文件监听数量有限制，导致 Vite 无法检测变更。以 Linux/macOS 为例，增加监听限制：

  # macOS
  echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
  echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
  sudo sysctl -w kern.maxfiles=65536
  sudo sysctl -w kern.maxfilesperproc=65536
  
  # Linux
  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
  sudo sysctl -p
  

• 第三方依赖或自定义代码干扰
  部分第三方库、自定义插件可能阻断热重载信号。临时移除非必要依赖，或创建全新 Angular 17 项目测试热重载，排除项目代码本身问题。

• 浏览器缓存或扩展拦截
  开启浏览器开发者工具「网络」面板的「禁用缓存」选项，同时禁用广告拦截、代理类扩展，避免阻断热重载的 WebSocket 连接。

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