Lots of Errors After Install

[JimLynchCodes]

Hi, I am working on a recently scaffolded Angular application.

I am trying to run similar code to this project here:
https://github.com/amaurym/login-with-metamask-demo

After installing the web3 npm package, my project doesn't compile when I simply add the line to import it:

import Web3 from 'web3';

This is the error message(s) I'm seeing:

ERROR in ./node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/eth-lib/lib'
ERROR in ./node_modules/web3-eth-accounts/lib/index.js
Module not found: Error: Can't resolve 'crypto' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/web3-eth-accounts/lib'
ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'
ERROR in ./node_modules/web3-providers-http/lib/index.js
Module not found: Error: Can't resolve 'http' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/web3-providers-http/lib'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'http' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/web3-providers-http/lib/index.js
Module not found: Error: Can't resolve 'https' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/web3-providers-http/lib'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'os' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/cipher-base'
ERROR in ./node_modules/keccak/lib/api/keccak.js
Module not found: Error: Can't resolve 'stream' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/keccak/lib/api'
ERROR in ./node_modules/keccak/lib/api/shake.js
Module not found: Error: Can't resolve 'stream' in '/Users/jlynch/Git-Projects/CryptoHydrants-Browser-Frontend/crypto-hydrants-ng/node_modules/keccak/lib/api'

I'm using node v14.17.0

Here is my package.json:

  "name": "foobar",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.13",
    "@angular/common": "~9.1.13",
    "@angular/compiler": "~9.1.13",
    "@angular/core": "~9.1.13",
    "@angular/forms": "~9.1.13",
    "@angular/localize": "~9.1.13",
    "@angular/platform-browser": "~9.1.13",
    "@angular/platform-browser-dynamic": "~9.1.13",
    "@angular/router": "~9.1.13",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@types/jwt-decode": "^3.1.0",
    "bootstrap": "^4.4.0",
    "jwt-decode": "^3.1.2",
    "rxjs": "~6.6.7",
    "tslib": "^1.10.0",
    "web3": "^1.3.6",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.15",
    "@angular/cli": "^9.1.15",
    "@angular/compiler-cli": "~9.1.13",
    "@angular/language-service": "~9.1.13",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "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.8.3"
  }
}

Can anyone please help me get past this blocker? 🙏

[JimLynchCodes]

thought I had fixed it but actually not... 😢

[pcaversaccio]

👉 #4070 (for Angular 12, give it a try)

[JimLynchCodes]

thanks. I am not sure what I am doing differently now, but I am using web3 now in my angular 9 app... 👍

import Web3 from 'web3';