Angular 14升级至15遇‘crypto’模块无法解析问题求助

Angular 15升级后使用的Webpack 5不再默认提供Node.js核心模块的polyfill，而asmcrypto.js依赖的crypto属于这类模块，因此需要手动配置fallback。由于Angular CLI默认不暴露webpack配置文件，我们可以通过自定义webpack构建器来解决：

1. 安装自定义webpack构建器
   在项目根目录执行命令：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 创建自定义webpack配置文件
   在项目根目录新建webpack.config.js，添加以下内容：

   module.exports = {
     resolve: {
       fallback: {
         "crypto": require.resolve("crypto-browserify")
       }
     }
   };
   

3. 修改Angular CLI配置
   打开angular.json，找到architect下的build和serve节点，替换原有builder并添加自定义配置：

   • 对于build节点：

     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有其他配置项
       }
     }
     

   • 对于serve节点：

     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 保留原有其他配置项
     }
     

4. 重新启动项目
   执行ng serve，此时Webpack会正确解析crypto模块，错误即可消除。

若后续出现其他类似Node.js核心模块找不到的问题（如stream），可安装对应的browserify兼容包（如stream-browserify），并在webpack.config.js的resolve.fallback中添加对应配置。

内容的提问来源于stack exchange，提问作者Gonzalo Diaz Ailan