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 命令。

步骤：

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

参考资料：

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

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