Angular应用在MacOS Catalina报错：TypeError: Cannot read properties of null (reading 'split')

问题详情 #

运行Angular应用时抛出以下错误：

TypeError: Cannot read properties of null (reading 'split')
    at required (/Users/.../node_modules/requires-port/index.js:13:23)
    at Object.common.setupOutgoing (/Users/.../node_modules/http-proxy/lib/http-proxy/common.js:101:7)
    at Array.stream (/Users/.../node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:127:14)
    at ProxyServer.<anonymous> (/Users/.../node_modules/http-proxy/lib/http-proxy/index.js:81:21)
    at HttpProxyMiddleware.middleware (.../node_modules/http-proxy-middleware/dist/http-proxy-middleware.js:22:32)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

该问题仅在MacOS Catalina系统出现，Linux Ubuntu环境下应用可正常运行。当前环境配置：

Angular CLI: 13.3.9
Node: 16.17.1
Package Manager: npm 8.15.0
OS: darwin x64

Angular: 13.2.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1
@angular-devkit/build-angular   13.3.9
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cdk                    13.3.9
@angular/cli                    13.3.9
@schematics/angular             13.3.9
rxjs                            7.5.6
typescript                      4.5.5

问题根源 #

错误栈指向requires-port库的端口解析逻辑，说明代理请求处理时，某个需要解析端口的参数为null，调用split方法时触发报错。MacOS与Linux的环境差异（比如环境变量、依赖安装完整性）导致了这个问题。

解决方案 #

1. 检查代理配置 #

确认proxy.conf.json或angular.json中的代理目标URL格式完整，必须包含协议、主机和端口（如http://localhost:3000），避免端口部分为空。
示例正确配置：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

2. 清理并重装依赖 #

MacOS下可能存在依赖缓存或安装不完整的情况，执行以下步骤：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

3. 排查环境变量 #

检查MacOS下的HTTP_PROXY/HTTPS_PROXY环境变量，若变量值格式错误（如缺少端口）会导致代理解析失败：

# 查看当前变量值
echo $HTTP_PROXY $HTTPS_PROXY
# 若有问题，临时取消变量
unset HTTP_PROXY HTTPS_PROXY

之后重启应用测试。

4. 升级相关依赖 #

旧版本的http-proxy-middleware或requires-port可能存在平台兼容bug，尝试升级到兼容版本：

npm install http-proxy-middleware@latest requires-port@latest

升级后验证应用是否正常运行，确保与当前Angular版本兼容。

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