Angular执行ng build --aot --prod卡在92% chunk asset optimization求助

我之前也碰到过类似的Angular生产打包卡住的情况，结合你提到的本地正常、EC2环境异常，还有npm版本差异和新增WebSocket功能这几个关键点，给你几个具体的排查和解决方向：

一、统一npm版本，规避权限问题 #

本地用的npm 6.0.0，EC2是5.6.0，版本差异很可能导致依赖安装或打包时的兼容性问题。更新npm时的权限错误可以通过**nvm（Node版本管理工具）**来解决，不用sudo就能安全管理Node和npm版本：

• 在EC2上安装nvm后，执行以下命令切换到和本地一致的版本：

  nvm install 6.0.0
  nvm use 6.0.0
  

  完成后重新执行npm install和打包命令，看看是否能正常推进。

二、排查WebSocket功能的AOT兼容性问题 #

新增WebSocket功能后出现打包异常，大概率是这部分代码或依赖和AOT编译不兼容：

• 先临时注释掉WebSocket相关的代码和依赖，再执行ng build --aot --prod，如果打包能正常完成，就确定问题出在WebSocket模块。
• 针对WebSocket部分细化排查：
  • 检查是否使用了AOT不支持的语法，比如动态导入未编译的模块、未用@Injectable装饰的服务、或者运行时动态创建组件的逻辑。
  • 确认所使用的WebSocket库是否支持AOT编译，有些第三方库可能需要额外配置才能在生产打包中正常工作。
  • 调整WebSocket服务的初始化时机，避免在模块加载阶段就触发连接逻辑，建议把连接逻辑放在组件初始化或用户交互触发的时机。

三、检查EC2的资源占用情况 #

打包过程（尤其是asset optimization阶段）很消耗内存，如果EC2实例内存不足，会导致进程卡住甚至崩溃：

• 用top命令查看EC2的内存使用情况，如果内存占用接近100%，可以尝试：
  • 临时增加swap分区缓解压力：

    sudo fallocate -l 4G /swapfile
    sudo chmod 600 /swapfile
    sudo mkswap /swapfile
    sudo swapon /swapfile
    

  • 升级EC2实例类型，选择内存更大的规格。

四、清理缓存后重新构建 #

缓存异常也可能导致打包卡住，执行以下命令清理所有缓存后重新尝试：

npm cache clean --force
ng clean --force
rm -rf node_modules package-lock.json
npm install
ng build --aot --prod

五、调整Angular打包优化配置 #

如果是asset优化阶段卡住，可以暂时关闭部分优化选项，定位具体问题：

• 打开angular.json，找到projects -> [你的项目名] -> architect -> build -> configurations -> production，修改配置：

  "optimization": {
    "scripts": true,
    "styles": true,
    "fonts": true,
    "images": false // 暂时关闭图片优化，测试是否能完成打包
  },
  "budgets": [ // 检查是否有资源超过预算导致中断
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
  

  修改后重新打包，如果能完成，再逐步开启优化选项，定位到具体是哪种资源导致的问题。

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