Angular + web3.js：找不到模块：错误：无法解析“加密”

Posted

技术标签:

【中文标题】Angular + web3.js：找不到模块：错误：无法解析“加密”【英文标题】：Angular + web3.js: Module not found: Error: Can't resolve 'crypto' 【发布时间】：2021-06-19 07:34:32 【问题描述】：

我正在尝试开始使用 Angular 和 Web3.js 来处理一些以太坊合约。重现：

    新的 npm install web3 --save ng 服务

package.json:


  "name": "ng-eth",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~11.0.6",
    "@angular/common": "~11.0.6",
    "@angular/compiler": "~11.0.6",
    "@angular/core": "~11.0.6",
    "@angular/forms": "~11.0.6",
    "@angular/platform-browser": "~11.0.6",
    "@angular/platform-browser-dynamic": "~11.0.6",
    "@angular/router": "~11.0.6",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "web3": "^1.3.4",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.1100.6",
    "@angular/cli": "~11.0.6",
    "@angular/compiler-cli": "~11.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"

app.component.ts：

import  Component, OnInit, Inject  from '@angular/core';
import  DOCUMENT  from '@angular/common';
import Web3 from "web3";


@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent implements OnInit 
  title = 'ngEth';
  
  private window: any;
  
  constructor(@Inject(DOCUMENT) private document: Document)
  
    this.window = this.document.defaultView;
  
  
  ngOnInit() 
    
       if (this.window.ethereum) 
        this.window.web3 = new Web3(this.window.ethereum);
        this.window.ethereum.enable();
        return true;

错误：./node_modules/eth-lib/lib/bytes.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\eth-lib\lib”中的“crypto”

错误：./node_modules/web3-eth-accounts/lib/index.js 找不到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\web3-eth-accounts\lib”中的“crypto”

错误：./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 找不到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\web3-eth-accounts\node_modules\eth-lib\lib”中的“crypto”

错误：./node_modules/web3-providers-http/lib/index.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\web3-providers-http\lib”中的“http”

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\xhr2-cookies\dist”中的“http”

错误：./node_modules/web3-providers-http/lib/index.js 找不到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\web3-providers-http\lib”中的“https”

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\xhr2-cookies\dist”中的“https”

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\xhr2-cookies\dist”中的“os”

错误：./node_modules/cipher-base/index.js 找不到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\cipher-base”中的“流”

错误：./node_modules/keccak/lib/api/keccak.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\keccak\lib\api”中的“流”

错误：./node_modules/keccak/lib/api/shake.js 未找到模块：错误：无法解析“C:\Users\profile\Documents\projects\ATS\ngEth\ngEth\node_modules\keccak\lib\api”中的“流”

【问题讨论】：

【参考方案1】：

在 Angular 12 中，@yurzui 发布的解决方案由于 webpack 5 升级而不再起作用。

要修复编译错误，您需要安装所需的依赖项：

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

然后你可以使用 tsconfig 路径指向所需的库：

tsconfig.json


  "compilerOptions": 
    "paths" : 
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"],
      "assert": ["./node_modules/assert"],
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify"],

来源：https://github.com/ChainSafe/web3.js/issues/4070

【讨论】：

【参考方案2】：

使其工作的最简单方法是修补由 Angular CLI 生成的 webpack.config.js。

方法一（无需额外依赖）

在应用的根文件夹中创建web3-patch.js 文件。

const fs = require('fs');

// path can differ depend on Angular CLI version
const browserConfigPath = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js';

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

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

在安装后执行此脚本

package.json

"scripts": 
  "start": "ng serve",
  ...
  "postinstall": "node web3-patch.js"
,

方法二

使用允许您扩展 Angular CLI 的模块：ngx-build-plus 或 @angular-builders/custom-webpack

执行原理图

ng add ngx-build-plus

创建 webpack.config.js

module.exports = 
  node:  crypto: true, stream: true 
;

更新 angular.json

"architect": 
  "build": 
    "builder": "ngx-build-plus:browser",
    "options": 
      ...
      "styles": [
        "src/styles.css"
      ],
      "scripts": [],
      "extraWebpackConfig": "webpack.config.js" <== add this
    ,
    "configurations": 
      ...
  ,
  "serve": 
    "builder": "ngx-build-plus:dev-server",
    "options": 
      "browserTarget": "cli1125:build",
      "extraWebpackConfig": "webpack.config.js" <== add this
    ,
    ...
  ,

【讨论】：

谢谢，我会试试这个。有什么副作用吗？我们必须这样做的原因是什么？ 方法 1 节省了数小时的挫败感。谢谢！在 Angular 11、web3 ^1.2.11、typescript ~4.0.2 上测试 方法 1 在我运行 postinstall 时给了我这个错误：“ ENOENT: no such file or directory, open 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser. js"，ng 12.0.2，节点 14.1.0

以上是关于Angular + web3.js：找不到模块：错误：无法解析“加密”的主要内容，如果未能解决你的问题，请参考以下文章

错误找不到模块'@angular/material

找不到模块'angular2/angular2'

找不到模块'@schemics/angular/utility/project'

Angular2延迟加载模块错误'找不到模块'

找不到模块'@angular-devkit/core'

故事书找不到模块'@storybook/angular'[重复]