Angular 13 热更新失效：为什么在 WSL 中项目文件无法热更新？

从现在开始，努力学习吧！本文《Angular 13 热更新失效：为什么在 WSL 中项目文件无法热更新？ 》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

热更新在 Angular 13 中失效

在 Angular 13 项目中，尽管启用了热更新 (HMR)，在修改 HTML、CSS 或 TypeScript 文件时项目却不会重新编译，导致前端页面没有变化。

潜在原因:

原因在于使用的 Node.js 环境位于 Windows Subsystem for Linux (WSL) 中，而项目文件存储在 Windows 主机操作系统中。目前，Windows 底层还不支持跨内核的事件推送，导致热更新失效。

解决方案:

要解决此问题，请将项目文件移动到 WSL 存储目录中，以确保 Node.js 和项目文件使用相同的内核。

步骤:

1. 将项目文件复制或移动到 WSL 存储目录。
2. 在 WSL 中运行 ng serve --hmr 命令。
3. 确保浏览器中打开的网址使用 WSL 的 IP 地址（通常为 http://localhost:4200）。

热更新现在应该正常工作，在对项目文件进行更改时，应用程序将自动重新编译并更新。

到这里，我们也就讲完了《Angular 13 热更新失效：为什么在 WSL 中项目文件无法热更新？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！