Angular 13 热更新失效：当使用 WSL 开发时如何解决？

angular 13 热更新失效：潜在原因和解决方法

当使用 Angular 13 时，您可能会遇到热更新（HMR）失效的问题。这意味着对 HTML、CSS 或 TypeScript 文件所做的更改不会触发前端的重新编译和反映。

一种可能的原因是您将 WSL（Windows Subsystem for Linux）中的 Node.js 用于开发，而您的主程序并不在 WSL 中。目前，Windows 底层不支持跨内核的事件推送，因此 HMR 无法正常工作。

解决方法：

为了解决此问题，需要将开发程序放在 WSL 存储目录中。这意味着您需要将代码复制到 WSL 中的文件夹，然后在那里使用 WSL 中的 Node.js 运行 Angular 命令。

步骤：

创建一个新的 WSL 存储目录，例如 /mnt/d/Dev/项目目录。
将您的 Angular 项目代码复制到此 WSL 文件夹中。
使用 WSL 的 Node.js 命令在 WSL 中运行 Angular，例如：/usr/bin/node /usr/lib/node_modules/npm/bin/npm-cli.js run ng serve --hmr。
现在，HMR 应该能够正常工作，并且前端应该可以反映对代码文件的更改。

参考资料：

有关此问题的更多信息，请参阅 StackOverflow 上的解答：
[Angular liveReload not working](https://stackoverflow.com/questions/69621586/angular-livereload-not-working)

以上就是Angular 13 热更新失效：当使用 WSL 开发时如何解决？的详细内容，更多请关注硕下网其它相关文章！