Angular引入第三方库后遇crypto模块polyfill配置问题求助

问题背景 #

在Angular项目中引入第三方库@lo/lib-common-mylib后，导入utils模块无异常，但声明utils.RegionalHelper时触发webpack 5的polyfill错误：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

项目未单独安装webpack，无webpack.config.js，此前尝试配置path-browserify未生效（因问题核心是crypto而非path）。

解决方案 #

方案1：通过自定义webpack配置添加crypto polyfill

Angular CLI支持通过@angular-builders/custom-webpack扩展webpack配置，步骤如下：

1. 安装依赖：

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

2. 在项目根目录创建webpack.config.js：

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

3. 修改angular.json，替换build和serve的builder并关联自定义配置：
   • 找到projects -> [你的项目名] -> architect -> build，修改：

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

   • 找到projects -> [你的项目名] -> architect -> serve，修改：

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

4. 重启开发服务或重新构建项目。

方案2：忽略crypto模块（仅确认库无需该功能时使用）

如果确认第三方库不会因缺少crypto功能报错，可配置webpack忽略该模块：

1. 按方案1步骤安装@angular-builders/custom-webpack，创建webpack.config.js：

module.exports = {
  resolve: {
    fallback: {
      crypto: false
    }
  }
};

2. 同样修改angular.json关联配置，重启服务。

方案3：直接添加polyfill到项目（部分场景生效）

在src/polyfills.ts中添加：

import 'crypto-browserify';

安装crypto-browserify后，尝试重新构建。若仍有类型报错，可在tsconfig.json的compilerOptions中添加：

"types": ["crypto-browserify"]

说明 #

此前配置path-browserify未生效，是因为当前问题的核心是crypto模块缺失polyfill，而非path模块，需针对crypto进行配置。

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