Angular ng serve自动刷新页面未生效，需手动刷新问题求助

问题背景 #

此前使用ng serve开发Angular应用一切正常，近期修改代码后浏览器虽自动刷新，但页面并未真正更新，必须手动刷新才生效。已尝试ng serve、ng serve --hmr、ng serve --hmr --poll=2000等命令，也执行了调整inotify参数的命令：

echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

当前环境配置：

Angular CLI: 16.2.6
Node: 18.13.0
Package Manager: npm 8.19.3
OS: linux x64

Angular: 16.2.10
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.6
@angular-devkit/build-angular   16.2.6
@angular-devkit/core            16.2.6
@angular-devkit/schematics      16.2.6
@angular/cdk                    16.2.9
@angular/cli                    16.2.6
@angular/material               16.2.9
@schematics/angular             16.2.6
rxjs                            7.5.7
typescript                      4.9.5
zone.js                         0.13.3

使用Win10下的WSL2环境，通过VS Code进行端口转发。

解决方案 #

• 迁移项目到WSL2本地文件系统
  WSL2对Windows NTFS文件系统（/mnt/c、/mnt/d等路径）的文件监听支持存在延迟或失效问题，将项目移动到WSL2的原生路径（如~/projects/your-app），彻底避免跨文件系统的监听异常。

• 修改Angular配置启用轮询
  在项目根目录的angular.json中，找到projects -> your-app -> architect -> serve -> options，添加"poll": 2000配置，确保文件变更能被正确检测：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-app:build",
      "poll": 2000
    }
  }
  

• 清除缓存并重装依赖
  执行以下命令清理Angular缓存与旧依赖，排除缓存导致的编译异常：

  ng cache clean
  rm -rf node_modules package-lock.json
  npm install
  

• 用VS Code WSL远程模式打开项目
  打开VS Code时，通过左下角的远程连接按钮选择WSL环境，直接打开WSL本地路径下的项目，而非Windows系统中的路径，保证文件变更实时同步到WSL环境。

• 临时关闭Windows Defender实时保护
  Windows Defender的实时扫描可能拦截WSL的文件变更通知，临时关闭后测试是否恢复正常，若有效可将WSL项目路径添加到Defender排除列表。

• 检查zone.js版本兼容性
  确保zone.js版本与Angular版本匹配，执行以下命令更新到兼容版本：

  npm install zone.js@~0.13.3 --save
  

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