Angular的热模块替换（HMR）是一种方便的开发工具，可以实现应用程序的快速更新和实时预览，但是在使用代理路径时会遇到问题。这是因为在使用代理时，请求会发生重定向，而HMR跟踪的是原始请求路径，因此无法识别重定向后的请求。

解决此问题的方法是在代理路径中添加一个特殊的标记，以便在HMR中处理这些路径。这可以通过以下代码示例实现：

// webpack.config.js const webpack = require('webpack'); const { join } = require('path');

module.exports = { entry: './src/main.ts', output: { path: join(__dirname, 'dist'), filename: 'bundle.js' }, devServer: { hot: true, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' }, xfwd: true, // Add this line onProxyRes: function(proxyRes, req, res) { // Add this block const location = proxyRes.headers.location; if (location && location.startsWith('/')) { proxyRes.headers.location = req.originalUrl + location; } } } } }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };

// main.ts if (module.hot) { module.hot.accept(); }

在代理配置中，我们添加了xfwd选项和onProxyRes回调函数。xfwd选项强制代理服务器将头信息发送到目标服务器，而不是自行生成头信息。onProxyRes函数用于从目标服务器响应中提取重定向的位置标头（如果有）并在路径前添加原始请求路径。

在主文件（如main.ts）中，我们使用module.hot.accept()来启用热模块替换。这将确保HMR在更新时正确更新组件。

通过使用这些配置和代码，我们可以使在代理路径上使用Angular热模块替换正常工作。