132-Angular导入web3发生Module not found错误

我们要在Angular项目中导入web3

1.安装web3

npm install web3

2.然后导入

import Web3 from "web3";

web3 =new Web3("")

3.发生错误

这个时候我们发现,报了好多好多错误

错误信息:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 

4.错误原因

这个错误是因为

webpack小于5的版本默认是支持polyfills的,

webpack的5版本及以上默认是不支持polyfills的

5.解决方案

001.编辑browser.js配置

打开node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js

修改resolve

resolve: {
  mainFields: ['es2015', 'browser', 'module', 'main'],
  fallback: {
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    os: require.resolve("os-browserify/browser"),
    assert: require.resolve("assert/"),
  }
},

 

002.手动安装6个包

npm install stream-http

手动安装这6个包

003.在index.html中加入script

<script>
  var global = global || window; //open this if you take global error

  var process = process || {
    env: {
      DEBUG: undefined
    },
    version: ''
  };
</script>

004.在polyfill.ts中加入buffer

加上这段代码

global.Buffer = global.Buffer || require('buffer').Buffer;

或者这样也可以

import { Buffer } from 'buffer';
global.Buffer = Buffer;