Angular开发服务器多次刷新触发ERR_STREAM_WRITE_AFTER_END崩溃

问题现象 #

启动Angular开发服务器后，应用初始可正常访问，服务器通过proxy.conf.js代理请求至底层服务，代理逻辑包含返回目标URL或通过fs.createReadStream('...').pipe(resp)读取静态文件返回。但多次刷新页面后，服务器会崩溃并抛出ERR_STREAM_WRITE_AFTER_END错误，错误堆栈中无自定义业务代码，偶尔还会出现goroutines死锁提示。

配置背景 #

Angular开发服务器的配置如下：

"executor": "@angular-devkit/build-angular:dev-server",
"options": {
  "buildTarget": "myapp:build:localLibs",
  "proxyConfig": "./apps/myapp/proxy.conf.js",
  "port": 4200,
  "servePath": "/"
}

根因分析 #

问题出在代理配置的bypass函数误用：当使用fs.createReadStream('style.css').pipe(resp)返回静态资源时，没有阻止原请求继续被代理到后端服务。这导致同一个HTTP响应被两个来源同时写入内容——一个是fs.createReadStream的流输出，另一个是原代理请求返回的内容，最终触发流写入冲突，引发ERR_STREAM_WRITE_AFTER_END错误。

解决方案 #

修改bypass函数的逻辑，将流管道返回资源的方式改为返回文件系统的绝对路径引用，示例如下：

// 原错误逻辑
fs.createReadStream('style.css').pipe(resp);

// 修改后的正确逻辑
return '@fs/absolute/path/to/style.css';

这种方式会让Angular开发服务器直接读取指定路径的文件并返回响应，同时自动阻止原请求的代理流程，避免双重响应写入的问题。

方案局限性 #

该解决方案存在一个限制：被引用的静态资源必须放置在Angular的输出目录中，否则开发服务器无法正确读取并返回该资源。

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