Angular 19升级后出现crypto包未找到错误[plugin angular-browser-node-built-in]

问题根源 #

crypto-js的core.js在浏览器环境下会尝试加载Node.js内置的crypto模块作为fallback，但Angular 19默认使用的esbuild构建工具对浏览器环境中引用Node.js内置模块的限制更严格，导致触发该报错。

解决方案1：配置Esbuild别名映射（推荐） #

Angular 19的esbuild构建工具需要直接在angular.json中配置别名，将crypto指向crypto-js：

• 打开angular.json，定位到对应项目的build配置节点（路径：projects -> [你的项目名] -> architect -> build -> options）
• 添加resolveAliases字段：

"options": {
  // 保留原有配置
  "resolveAliases": {
    "crypto": "crypto-js"
  }
}

• 清理无效配置：
  1. 移除allowedCommonJsDependencies中的crypto（它是Node内置模块，不属于CommonJS依赖）：

  "allowedCommonJsDependencies": [
    "secure-web-storage",
    "crypto-js"
  ]
  

  2. 删除tsconfig.json中关于crypto的paths配置（esbuild不读取该配置，易引发冲突）

解决方案2：使用浏览器端Polyfill #

若方案1无效，可安装crypto-browserify作为crypto模块的浏览器兼容实现：

1. 安装依赖：

npm install crypto-browserify --save-dev

2. 在angular.json的build配置中添加别名：

"resolveAliases": {
  "crypto": "crypto-browserify"
}

解决方案3：升级依赖包 #

检查secure-web-storage和crypto-js是否有最新版本，新版本可能已修复浏览器环境下的模块引用问题：

npm update secure-web-storage crypto-js

内容的提问来源于stack exchange，提问作者rami-sf