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

html5 • • 问答

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

  1. 新的
  2. npm install web3 --save
  3. 服务

包.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:UsersprofileDocumentsprojectsATSngEthngEthnode_moduleseth”中的“crypto” -liblib'

错误：./node_modules/web3-eth-accounts/lib/index.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_modules”中的“crypto” web3-eth-accountslib'

错误：./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATS”中的“crypto” ngEthngEthnode_modulesweb3-eth-accountsnode_moduleseth-liblib'

错误：./node_modules/web3-providers-http/lib/index.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_modules”中的“http” web3-providers-httplib'

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEth”中的“http” node_modulesxhr2-cookiesdist'

错误：./node_modules/web3-providers-http/lib/index.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_modules”中的“https” web3-providers-httplib'

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEth”中的“https” node_modulesxhr2-cookiesdist'

错误：./node_modules/xhr2-cookies/dist/xml-http-request.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEth”中的“os” node_modulesxhr2-cookiesdist'

错误：./node_modules/cipher-base/index.js 找不到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_modulescipher-base”中的“流” '

错误：./node_modules/keccak/lib/api/keccak.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_moduleskeccak”中的“流” libapi'

错误：./node_modules/keccak/lib/api/shake.js 未找到模块：错误：无法解析“C:UsersprofileDocumentsprojectsATSngEthngEthnode_moduleskeccak”中的“流” libapi'

回答

在 Angular 12 中，由于 webpack 5 升级，@yurzui 发布的解决方案不再有效。

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

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

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

配置文件

{
  "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

回答

The easist way to make it working is to patch webpack.config.js generated by Angular CLI.

Method 1(no additional dependencies required)

Create web3-patch.js file in root folder of your app.

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);
  });
});

Execute this script on postinstall

package.json

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

Method 2

使用允许您扩展 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
    },
    ...
  },

以上是Angular+web3.js：找不到模块：错误：无法解析“加密”的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>