Web3 和 Angular 11 损坏的依赖项

Posted

技术标签:

【中文标题】Web3 和 Angular 11 损坏的依赖项【英文标题】:Web3 and Angular 11 broken dependencies 【发布时间】:2021-04-21 10:39:11 【问题描述】:

我正在尝试使用 Angular 创建以太坊 dapp。 我在关注那篇文章: https://medium.com/blockchain-developer/learn-how-to-create-your-own-dapp-with-angular-9-part-iv-truffle-7704dc4269ab 但是,当我使用npm install --save web3 将 web3 添加到应用程序时, 并在代码中调用它,我遇到了以下问题:

Error: ./node_modules/swarm-js/node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '/home/szymon/dev/dapp/node_modules/swarm-js/node_modules/eth-lib/lib'

Error: ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '/home/szymon/dev/dapp/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

Error: ./node_modules/web3-eth-accounts/src/index.js
Module not found: Error: Can't resolve 'crypto' in '/home/szymon/dev/dapp/node_modules/web3-eth-accounts/src'

Error: ./node_modules/web3-providers-http/src/index.js
Module not found: Error: Can't resolve 'http' in '/home/szymon/dev/dapp/node_modules/web3-providers-http/src'

Error: ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'http' in '/home/szymon/dev/dapp/node_modules/xhr2-cookies/dist'

Error: ./node_modules/web3-providers-http/src/index.js
Module not found: Error: Can't resolve 'https' in '/home/szymon/dev/dapp/node_modules/web3-providers-http/src'

Error: ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in '/home/szymon/dev/dapp/node_modules/xhr2-cookies/dist'

Error: ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'os' in '/home/szymon/dev/dapp/node_modules/xhr2-cookies/dist'

Error: ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in '/home/szymon/dev/dapp/node_modules/cipher-base'

Error: ./node_modules/keccak/lib/api/keccak.js
Module not found: Error: Can't resolve 'stream' in '/home/szymon/dev/dapp/node_modules/keccak/lib/api'

Error: ./node_modules/keccak/lib/api/shake.js
Module not found: Error: Can't resolve 'stream' in '/home/szymon/dev/dapp/node_modules/keccak/lib/api'

我该怎么办? Web3 是这样调用的:

let Web3 = require('web3');
export class TransferService 
    constructor()    
      if (typeof window.web3 !== undefined) 
        this.web3 = window.web3.currentProvider;
       else 
        this.web3 = new Web3.providers.HttpProvider('http://localhost:7545');
      
      window.web3 = new Web3(window.ethereum);
      this.enable = this.enableMetaMaskAccount();
      

【问题讨论】:

你是如何尝试在 Angular 代码中调用 web3 的? 查看原帖,已编辑。 如果您从浏览器调用它,请尝试使用 import Web3 from 'web3'; 而不是 let Web3 = require('web3'); 在浏览器的情况下使用import 是一个好点。但是,如果 web3 是一个纯 javascript 库,那么使用 import 可能是不够的。 JavaScript 文件需要列在angular.json 中的architect->build->scripts[] 数组中。 使用import 代替require 并不能解决任何问题。 【参考方案1】:

我遇到了同样的问题,我通过卸载 web3 并重新安装版本 1.2.11 解决了它

第 1 步:npm 卸载 web3

第 2 步:npm install web3@1.2.11

我不确定这是否会产生其他后果,但在经历了很多挫折之后它对我有用!

【讨论】:

【参考方案2】:

我在 Angular 11 应用程序中遇到了同样的问题,我能够使用这种方法解决它。感谢@Zakoff,提供了这个版本的 web3。

第 1 步。

npm 卸载 web3

第 2 步。

npm install web3@1.2.11

第 3 步。使用错误中显示的单引号中的单词更新 package.json。在您的情况下,“crypto”、“https”、“http”、“os”和“stream”。

在开发依赖之后立即像这样更新 package.json:

"browser": 
"crypto": false,
"https": false,
"http": false,
"os": false,
"stream": false

您的 package.json 应该如下所示。

【讨论】:

以上是关于Web3 和 Angular 11 损坏的依赖项的主要内容,如果未能解决你的问题,请参考以下文章

外部 AAR 依赖项中的 proguard.txt 损坏(非 ascii 字符)

损坏的序列化解析结果。使用firebase ui依赖项时找不到选定的模块

Visual Studio Code 中的自动导入损坏

Angular package.json 和未满足的对等依赖项

在 Angular 10 中安装缺少的依赖项

在安装 Web3js 依赖项时,它显示 node-gyp 问题