Angular8使用crypto-browserify出现process.version.split错误的解决方法

这个错误本质是因为你在浏览器环境中使用了依赖Node.js核心API的库（crypto-browserify依赖的pbkdf2包尝试访问process.version），但浏览器里没有全局的process对象，导致调用split方法时出错。下面是具体的解决步骤：

1. 安装必要的polyfill和依赖 #

首先安装浏览器环境需要的Node.js核心模块polyfill，以及自定义webpack的构建工具（Angular 8默认webpack配置无法直接修改，需要用扩展工具）：

npm install process buffer stream-browserify util assert crypto-browserify --save
npm install @angular-builders/custom-webpack --save-dev

2. 配置全局polyfill #

在src/polyfills.ts文件末尾添加以下代码，把process和Buffer挂载到浏览器全局对象上，模拟Node.js的全局环境：

(window as any).global = window;
import * as process from 'process';
window['process'] = process;
import { Buffer } from 'buffer';
window['Buffer'] = Buffer;

3. 扩展Webpack配置 #

在项目根目录创建custom-webpack.config.js文件，添加以下配置，让Webpack在浏览器环境中自动替换Node.js核心模块为兼容版本：

const webpack = require('webpack');

module.exports = {
  plugins: [
    // 自动注入process和Buffer到全局作用域
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ],
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "buffer": require.resolve("buffer/"),
      "stream": require.resolve("stream-browserify"),
      "util": require.resolve("util/"),
      "assert": require.resolve("assert/"),
    },
  },
};

4. 修改Angular构建配置 #

打开angular.json，找到architect下的build和serve配置，替换默认的builder为自定义webpack的builder，并指定配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 保留你原有的其他build配置（比如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "your-project-name:build"
    }
    // 保留原有的serve配置
  }
}

注意把your-project-name替换成你实际的项目名称。

5. 修复代码中的语法错误 #

你的decrypt方法里有个明显的语法错误，会导致解密逻辑无法正常运行，记得修正：

// 错误写法
let buffer = Buffer.from(cypher`enter code here`, 'base64');
// 正确写法（去掉多余的模板字符串标记）
let buffer = Buffer.from(cypher, 'base64');

完成以上步骤后，重启Angular开发服务器，应该就能解决process.version.split的错误，同时你的加密解密逻辑也能正常工作了。

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