将Web3导入到Ionic项目时出现问题?

ergxz8rk  于 2023-01-28  发布在  Ionic
关注(0)|答案(1)|浏览(140)

我一直在尝试将Web3导入到Ionic v4项目中。
我在:
系统版本:macOS莫哈韦10.14.6
国家预防机制:6.9.0
节点:10.16.1
重现步骤:
1.开始一个新的Ionic项目:ionic start my-app blank --type=angular
1.安装Web3:npm install --save web3
1.安装@types/web3:npm install --save @types/web3
1.添加一些代码:

import { Component } from '@angular/core';
import { Web3 } from 'web3';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  w = new Web3(new Web3.providers.HttpProvider('https://rinkeby.infura.io/v3/...apikey...'));

  constructor() {}

  test(){
    console.log(this.w);
  }
}

此处出错:

import { Web3 } from 'web3';

错误日志:
模块"../../../../../../../../../../用户/管理员/桌面/Learn_Ionic/区块链/我的应用程序/节点模块/@类型/web3"没有导出的成员"Web3"
只能通过打开"allowSyntheticDefaultImports"标志并引用其默认导出,使用ECMAScript导入/导出引用此模块。
这是我的包裹。

{
  "name": "my-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@types/web3": "^1.0.19",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "web3": "^1.2.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": []
  }
}
9gm1akwq

9gm1akwq1#

https://github.com/ethereum/web3.js/issues/2260#issuecomment-458519127
这可能会帮助您解决这个问题,您所要做的就是在应用程序的根目录中创建一个名为patch.js的文件(如上面的问题注解中所述),并在package.json postinstall": "node patch.js中的scripts部分下添加一个脚本
再次运行npm install,看看它是否工作!

相关问题