Angular使用web3时出现Can't Resolve 'Crypto' 报错的解决方法

当我们在Angular中引入web3时,由于Angular-cli的限制,会出现Can’t Resolve ‘Crypto’这个报错信息.但是浏览器确实有加密支持的 https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto

官方开发团队给出的解释说在默认情况下大多数项目都不适用加密服务,因此会删除该部分的buildin来减少文件大小.

下面提供一种方法,可以通过补丁的方式来解决问题:

1.新建一个patch.js文件

const fs = require('fs')
const file = './node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
//此处为angular6的路径配置
//angular4的路径配置为:./node_modules/@angular/cli/models/webpack-configs/browser.js

fs.readFile(file, 'utf8', function (err, data) {
  if (err) {
    return console.log(err);
  }
  
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');

  fs.writeFile(file, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

2.在package.json中添加命令

"scripts": {
    ...
   "postinstall": "node bin/patch.js"
 },

3.运行命令后启动项目即可

npm run postinstall

注意: 由于不同版本的Angular的webpack配置文件的路径不同,请根据自己的版本来更换file路径