Angular 13 热更新失效：为什么 WSL 中的 Node.js 无法识别项目文件更新？

一分耕耘，一分收获！既然打开了这篇文章《Angular 13 热更新失效：为什么 WSL 中的 Node.js 无法识别项目文件更新？ 》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

Angular 13 热更新失效的疑难解答

一位使用 Angular 13 和 ng-zorro 库的开发者遇到热更新无效的问题。尽管已启用热更新功能，但在修改 HTML、CSS 或 TS 文件后，前端并没有自动重新编译或更新。

问题分析

开发人员检查了他们的配置，包括环境文件、angular.json 和 package.json，一切似乎都已正确配置。他们还确认在 Webstorm 控制台中启动了热更新。

解决方案

破案的谜底出人意料：原先运行指令和项目位置不一致造成该问题。开发人员在 WSL（Windows 10 WSL 子系统）内使用了 Node.js，但项目文件却位于 Windows 主存储空间内。

事实解释

目前，在 Windows 底层跨内核事件推送尚未得到支持。这意味着 WSL 中的 Node.js 无法向主 Windows 操作系统发送热更新事件。因此，即使启用了热更新功能，Angular 仍然无法检测到文件更改并自动触发重新编译。

解决方案

为了解决这个问题，需要将开发项目移动到 WSL 存储目录内。通过将项目放入 WSL，Node.js（运行在 WSL 中）便可以访问文件，并向 Angular 应用程序发送热更新事件。

注意事项

stackoverflow 上的其他开发者也遇到了类似问题，并提供了不同的解决方法，包括在 Windows 系统上安装 Linux 仿真环境以及使用 Docker 预先将项目构建为 Docker 容器。然而，对于特定情况而言，最佳解决方案是将项目移动到 WSL 存储目录内。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。