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

我刚刚开始探索区块链技术，并在前几天签订了我的第一份智能合同。为了继续，我尝试为智能合约制作一个前端，但我面临着使用web3.js将Angular应用程序连接到Metamask的困难

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

Error: ./node_modules/eth-lib/lib/bytes.js Module not found: Error: Can't resolve 'crypto' in 'C:\Users\profile\Desktop\Coding\EthSmartContractProject\Frontend\node_modules\eth-lib\lib'

Error: ./node_modules/eth-lib/lib/bytes.js Module not found: Error: Can't resolve 'stream' in 'C:\Users\profile\Desktop\Coding\EthSmartContractProject\Frontend\node_modules\eth-lib\lib'

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

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

从'@angular/core'导入{Injectable}；
从“Web3”导入Web3；
申报出租窗口：有；
@注射的({
providedIn:'根'
})
出口类合同服务{
web3：任何；
账户：数组；
异步加载web3（）{
if（window.ethereum）{
window.web3=新的web3（window.ethereum）；
等待window.ethereum.enable；
}else if（window.web3）{
window.web3=新的web3（window.web3.currentProvider）；
}否则{
窗口。警报（“检测到非EnthUM浏览器。您应该考虑使用Meta MAMASK！”）；
}
}
}

复制步骤：

• ng新项目
• NPMIWeb3
• 创建区块链服务
• ng发球

我已尝试实施但不起作用的解决方案：

• 向package.json添加

  “浏览器”：{“crypto”：false}

• 使用自定义网页包并尝试通过启用

  crypto:true

  或其他方式“修补”行为

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

解决方案：

我没有通过npm导入Web3，而是使用JSDeliver将其包含在index.html文件中

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