.NET Core 2.0+Angular 5单应用模板（基于Angular CLI）HMR无法工作

我之前在Linux环境下用微软官方的Angular SPA模板时也碰到过一模一样的HMR失效问题，折腾了一阵后总结出几个靠谱的解决办法，你可以挨个试试：

1. 检查ASP.NET Core端的SPA中间件配置 #

回到项目主目录，打开Startup.cs文件，确认SPA中间件是否正确配置了HMR对应的启动脚本：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        // 这里要对应ClientApp/package.json里的hmr启动脚本
        spa.UseAngularCliServer(npmScript: "start:hmr");
    }
});

2. 配置ClientApp的HMR启动脚本 #

进入ClientApp目录，打开package.json，确保scripts里有带HMR参数的启动命令：

"scripts": {
  "start": "ng serve",
  "start:hmr": "ng serve --hmr --host 0.0.0.0 --disable-host-check",
  // 其他原有脚本...
}

加--host 0.0.0.0是为了让Linux下的服务能被本地访问，--disable-host-check可以避免主机校验导致的HMR连接失败。

3. 修复Angular的HMR环境配置 #

如果ClientApp/src/environments下没有environment.hmr.ts文件，直接新建一个，内容如下：

export const environment = {
  production: false,
  hmr: true
};

同时确认environment.ts里的hmr字段设为false，避免混淆环境配置。

4. 调整Linux文件系统监听限制 #

Linux默认的文件监听数量有限，Angular的HMR依赖文件变化检测，很可能因为这个上限不够导致无法感知文件修改：
执行这条命令临时调高监听上限（重启后依然有效）：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

5. 清除缓存并重启应用 #

最后做一次彻底的清理重启，避免残留进程或缓存干扰：

• 完全停止当前运行的所有相关进程（包括dotnet和ng的进程）
• 进入ClientApp目录，执行：

  npm cache clean --force
  rm -rf node_modules .angular/cache
  npm install
  

• 回到项目主目录，用dotnet watch run启动应用，再修改.ts或.html文件测试HMR是否正常。

如果还是不行，可以打开浏览器控制台看看有没有HMR相关的WebSocket连接错误——要是有的话，得检查下Linux防火墙是否阻止了HMR默认使用的4200端口WebSocket连接。

内容的提问来源于stack exchange，提问作者beetle