Angular 13 热更新失效，如何解决 WSL 环境下程序未放置在存储目录的问题？

Angular 13 热更新失效

问题：

在一个 Angular 13 应用中，启用了热更新 (HMR)，但更改源文件后，前端没有更新。

疑似原因：

• 环境配置错误
• 开发程序未放置在 WSL 存储目录中

环境配置：

• Node: v16.13.2
• npm: 8.3.0
• yarn: 1.22
• Angular: ~13.3.0

配置：

• environment.js:

  export const environment = {
  production: false,
  hmr: true
  };

• angular.json:

  {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "development": {
        "hmr": true,
        "browserTarget": "chengzheng-official:build:development"
      }
    }
  }
  }

分析：

经检查，环境配置和 Angular CLI 控制台已启动热更新，但实际并未生效。

解决方案：

原因在于，正在使用 WSL 中的 Node，但主程序未放置在 WSL 存储目录中。Windows 底层不支持跨内核的事件推送，因此热更新失效。

修复：

要解决此问题，需要将开发程序移动到 WSL 存储目录中。例如，可以将项目目录移动到 /mnt/d/dev/my-project。