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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Angular 13 热更新失效，如何解决 WSL 环境下程序未放置在存储目录的问题？ 》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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。

今天关于《Angular 13 热更新失效，如何解决 WSL 环境下程序未放置在存储目录的问题？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！