ASP.NET MVC 5 集成 Angular 11 无法启用HMR热重载问题求助

1. 修正Angular侧HMR宿主匹配配置 #

Angular的HMR客户端默认只会匹配public-host指定的域名，当页面运行在非4200端口的MVC项目域名下时，会判定运行环境不匹配，自动降级为全页重载。需要在启动命令中追加MVC项目的域名/端口到允许列表：

ng serve --public-host=https://localhost:4200 --allowed-hosts=localhost,你的MVC项目域名 --ssl --hmr

如果你的MVC项目跑在https://localhost:5001，就写成--allowed-hosts=localhost,localhost:5001。

2. 调整Index.cshtml的资源引用路径 #

你需要补充HMR运行时依赖的引用，并且严格按照运行时依赖在前、业务代码在后的顺序加载，同时不要添加defer/async属性避免加载顺序混乱：

<!-- Angular HMR运行时依赖脚本 -->
<script src="https://localhost:4200/runtime.js"></script>
<script src="https://localhost:4200/polyfills.js"></script>
<script src="https://localhost:4200/vendor.js"></script>
<!-- 业务代码包放在最后 -->
<script src="https://localhost:4200/main.js"></script>

注意：请确保MVC项目也是通过HTTPS访问，避免混合内容安全策略拦截Angular的资源请求和HMR websocket连接

3. 补充Angular入口文件的HMR适配逻辑 #

Angular 11默认的HMR逻辑只适配直接访问ng serve域名的场景，跨宿主运行时需要手动在main.ts里显式声明模块可热替换：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

declare const module: any;
function bootstrap() {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

bootstrap();

// 新增跨宿主HMR适配逻辑
if (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => {
    const appRef = module.exports.injector.get('ApplicationRef');
    appRef.components.forEach(c => c.destroy());
  });
}

同时要确认angular.json中对应serve配置的hmr属性已经设为true：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "serve": {
          "configurations": {
            "development": {
              "hmr": true
            }
          }
        }
      }
    }
  }
}

4. 禁用MVC侧的静态资源缓存 #

在Web.config中添加配置，避免MVC缓存Angular的构建包导致HMR版本校验失效：

<configuration>
  <system.webServer>
    <staticContent>
      <clientCache cacheControlMode="DisableCache" />
    </staticContent>
  </system.webServer>
</configuration>

完成以上配置后重启ng serve和MVC项目即可生效，修改Angular代码时不会触发全页重载，页面状态会正常保留。

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