Web3 and Angular 11 broken dependencies

Question

I'm trying to create Ethereum dapp with Angular. I was following that article: https://medium.com/blockchain-developer/learn-how-to-create-your-own-dapp-with-angular-9-part-iv-truffle-7704dc4269ab However, when I added web3 to app with npm install --save web3, and called it in code, I got following issues:

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'

What should I do? Web3 is called like this:

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();
      }
}

if you're calling it from the browser try `import Web3 from 'web3';` instead of `let Web3 = require('web3');` — Rachid O, Jan 16 '21 at 18:47
Using `import` in the case of a browser is a good point. However if `web3` is a pure JavaScript library it might be not enough to use `import`. The JavaScript files need to be listed in `angular.json` in `architect`->`build`->`scripts[]` array. — Milan Tenk, Jan 16 '21 at 19:21
Did you try to add the JavaScript file paths to the `scripts[]` in `angular.json` as suggested above? — Milan Tenk, Jan 17 '21 at 08:53

score 4 · Answer 1 · answered Mar 07 '21 at 20:53

4

I had the same issue and I resolved it by uninstalling web3 and reinstalling version 1.2.11

Step 1: npm uninstall web3

Step 2: npm install web3@1.2.11

I am not sure if this will have other consequences but it worked for me after alot of frustration!

answered Mar 07 '21 at 20:53

Zakoff

12,665
5
22
35

score 3 · Answer 2 · edited May 04 '21 at 15:15

I had this same issue in my Angular 11 application and I was able to solve it using this method. Thanks to @Zakoff, for supply this version of web3.

Step 1.

npm uninstall web3

Step 2.

npm install web3@1.2.11

Step 3. update package.json with the words in single quotes shown in your error. In your case, 'crypto', 'https', 'http', 'os', and 'stream'.

update package.json like this immediately after dev dependencies:

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

Your package.json should look like this.

Web3 and Angular 11 broken dependencies

2 Answers2