如何使用 Web3.js 将 Metamask 连接到 Angular 应用程序？

Question

我刚刚开始探索区块链技术，并于前几天制作了我的第一个智能合约。接下来，我尝试为智能合约创建一个前端，但在使用 web3.js 将我的 Angular 应用程序连接到 Metamask 时遇到困难。

具体来说，我遇到一个问题，当我尝试为我的 Angular 应用程序提供服务时，它给出了以下错误：

错误：./node_modules/eth-lib/lib/bytes.js 找不到模块：错误：无法解析“C:\Users\profile\Desktop\Coding\EthSmartContractProject\Frontend\node_modules\eth-lib”中的“加密” \lib'

错误：./node_modules/eth-lib/lib/bytes.js 找不到模块：错误：无法解析“C:\Users\profile\Desktop\Coding\EthSmartContractProject\Frontend\node_modules\eth-lib”中的“流” \lib'

这是我的 Blockchain.service.ts，我在其中尝试处理角度应用程序中的所有区块链相关任务：

import { Injectable } from '@angular/core';
import Web3 from "web3";
declare let window:any;

@Injectable({
  providedIn: 'root'
})
export class ContractService {
  web3: any;
  accounts: Array<String>;

  async loadWeb3() {
    if (window.ethereum) {
        window.web3 = new Web3(window.ethereum);
        await window.ethereum.enable;
    } else if (window.web3) {
        window.web3 = new Web3(window.web3.currentProvider);
    } else {
        window.alert('Non-Ethereum browser detected. You Should consider using MetaMask!');
    }
  }
}

重现步骤：

• 新项目
• npm 我的 web3
• 创建区块链服务
• 服务

我尝试实施但没有成功的解决方案：

• 添加"browser": { "crypto": false }到 package.json
• 使用自定义 webpack 并尝试通过启用或其他方式“修补”行为crypto: true。

我想我知道问题出在哪里，它的依赖项试图导入模块中内置的nodejs。但我不知道如何解决它。

Answer 1

解决方案：

我必须使用 jsdelivr 将其包含在 index.html 文件中，而不是通过 npm 导入 Web3。

<script src="https://cdn.jsdelivr.net/npm/web3@1.3.5/dist/web3.min.js"></script>