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

Answer 1

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 [email protected]

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.

Answer 2

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 [email protected]

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