如何在Angular12中正确配置crypto-random-string且无编译报错

思路正确性判断 #

你采用custom-webpack补全Node核心模块polyfill的处理方向正确。Angular 11+默认移除了Node.js核心模块的浏览器侧兼容垫片，依赖Node原生crypto、util等模块的第三方包会触发模块找不到的报错，你前面的配置逻辑是这类问题的常规处理路径，问题出在遗漏了全局变量的兼容配置。

错误根因 #

你引入的util垫片包依赖Node环境内置的全局process变量，浏览器环境没有该原生变量，因此构建成功后运行时会抛出process is not defined错误。

标准修复步骤 #

1. 安装process依赖包
   执行命令：
   npm i process --save
2. 更新custom-webpack.config.js配置，新增全局变量注入，完整配置如下：

const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve("crypto-browserify"),
      util: require.resolve("util/"),
      stream: require.resolve("stream-browserify"),
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
};

修改后重新执行ng serve即可正常运行。

更优替代方案 #

如果你的项目仅需要生成随机字符串，不需要crypto-random-string的其他特殊能力，可以直接用浏览器原生Web Crypto API实现同等功能，无需修改webpack配置、无需引入额外依赖，打包体积更小：

// 工具方法
function generateRandomStr(len: number): string {
  const arr = new Uint8Array(len);
  window.crypto.getRandomValues(arr);
  return Array.from(arr, (dec) => ('0' + dec.toString(16)).slice(-2)).join('').slice(0, len);
}

// 调用
random = generateRandomStr(43);

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