从其他Web服务器访问ng serve时HMR失效的解决方法咨询

这个问题的核心是：你的页面在localhost:8080加载，但HMR的WebSocket连接默认会使用当前页面的域名（也就是8080），而实际提供HMR服务的是localhost:4200的Angular服务器，所以导致连接失败。下面给你两种可行的解决方案，以及对当前架构的评估：

方案一：手动指定HMR的WebSocket连接地址 #

1. 确保Angular项目已配置HMR：如果还没开启HMR，先执行ng add @angularclass/hmr完成基础配置，或者手动在项目中添加HMR相关代码。

2. 修改HMR连接配置：
   打开src/main.ts，在HMR初始化的代码块中，手动指定WebSocket的服务器地址为Angular服务器的地址：

   import { enableProdMode } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { environment } from './environments/environment';
   import { hmrBootstrap } from './hmr';
   import { AppModule } from './app/app.module';
   
   if (environment.production) {
     enableProdMode();
   }
   
   const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
   
   if (environment.hmr) {
     if (module['hot']) {
       // 关键：指定HMR的WebSocket连接到Angular服务器
       (module['hot'] as any).config({
         server: 'http://localhost:4200/sockjs-node'
       });
       hmrBootstrap(module, bootstrap);
     } else {
       console.error('HMR未启用，请确保启动ng serve时加上--hmr参数');
     }
   } else {
     bootstrap().catch(err => console.error(err));
   }
   

3. 启动Angular服务器时添加参数：
   启动命令加上--hmr和允许跨域的参数（因为8080要加载4200的资源）：

   ng serve --hmr --disable-host-check --publicHost http://localhost:4200
   

4. 更新8080的index.html：
   确保页面中引用的Angular资源都是来自localhost:4200，比如：

   <script src="http://localhost:4200/runtime.js"></script>
   <script src="http://localhost:4200/polyfills.js"></script>
   <script src="http://localhost:4200/styles.js"></script>
   <script src="http://localhost:4200/vendor.js"></script>
   <script src="http://localhost:4200/main.js"></script>
   

方案二：用反向代理转发HMR请求 #

如果不想修改Angular代码，可以让你的localhost:8080服务器把所有/sockjs-node路径的请求转发到localhost:4200。举几个常见服务器的配置例子：

如果你用Nginx： #

在Nginx配置中添加：

location /sockjs-node {
    proxy_pass http://localhost:4200;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

如果你用Express（Node.js后端服务器）： #

安装http-proxy-middleware，然后添加中间件：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/sockjs-node', createProxyMiddleware({
  target: 'http://localhost:4200',
  ws: true,
  changeOrigin: true
}));

这样，当HMR请求http://localhost:8080/sockjs-node时，会被自动转发到4200的Angular服务器，解决连接问题。

关于架构合理性的评估 #

你的架构是可行的，尤其适合后端服务器（8080）同时提供API和静态页面，前端用Angular开发服务器（4200）做热更新的场景。不过更简洁的替代方案是：

• 用ng build --watch把Angular代码编译到8080服务器的静态资源目录，这样不需要跨域，HMR也能正常工作（不过热更新速度可能不如ng serve）；
• 或者让Angular开发服务器代理API请求到8080，直接在4200访问页面，这样HMR默认就能正常工作，不需要额外配置。

如果你的业务场景必须保持两个独立服务器，上面的两种方案都能完美解决HMR的问题。

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