Error: Can't resolve 'crypto'

[naturalfreak]

I'm using @angular version 6.0.0-rc.5

and I cannot compile this code

import { Injectable } from '@angular/core';
import * as web3 from 'web3';

@Injectable()
export class Web3Provider {

  constructor(){
    console.log(web3) 
  }

}

I got this error

ERROR in ../node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '*/node_modules/eth-lib/lib'
ERROR in ../node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
Module not found: Error: Can't resolve 'crypto' in '*/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

With Angular version 5 everything works fine.

My package json is

  "dependencies": {
    "@angular/animations": "^6.0.0-rc.5",
    "@angular/cdk": "^6.0.0-rc.5",
    "@angular/common": "^6.0.0-rc.5",
    "@angular/compiler": "^6.0.0-rc.5",
    "@angular/core": "^6.0.0-rc.5",
    "@angular/forms": "^6.0.0-rc.5",
    "@angular/http": "^6.0.0-rc.5",
    "@angular/material": "^6.0.0-rc.5",
    "@angular/platform-browser": "^6.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
    "@angular/platform-server": "^6.0.0-rc.5",
    "@angular/router": "^6.0.0-rc.5",
    "@angular/service-worker": "^6.0.0-rc.5",
    "@nguniversal/express-engine": "^5.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0",
    "compression": "^1.7.2",
    "core-js": "^2.5.5",
    "ethereumjs-tx": "^1.3.4",
    "material-design-icons": "^3.0.1",
    "rxjs": "6.0.0-rc.0",
    "spdy": "^3.4.7",
    "tinymce": "^4.7.10",
    "ts-loader": "^4.2.0",
    "web-animations-js": "^2.3.1",
    "web3": "^1.0.0-beta.34",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.5.0",
    "@angular/cli": "^6.0.0-rc.4",
    "@angular/compiler-cli": "^6.0.0-rc.5",
    "@angular/language-service": "^6.0.0-rc.5",
    "@types/node": "^9.6.4",
    "express": "^4.16.3",
    "node-sass": "^4.8.3",
    "reflect-metadata": "^0.1.12",
    "typescript": "~2.7.2"
  }

[Fi1osof]

https://www.npmjs.com/package/crypto

This package has been deprecated
Author message:

This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in.

Try to upgrade node-js

[naturalfreak]

I'm using node version 9.11.1

[echozhangzy8888]

I have same problem ,my node version is also 9.11.1

[wtubog]

I've been experiencing this too (I recently upgraded to Angular 6 rc.5). I think the problem here is with the Angular CLI and it's underlying Webpack... Previously, my CLI is at version 1.7.3 and Web3 works just fine, but after upgrading to 1.7.4 it's not working anymore and shows exactly the error mentioned above.

To work this around, I just downloaded the build files from the releases page, copied the source to my app/src and included it on scripts property of the angular.json config :)

[kmturley]

My workaround was to downgrade to an older version of web3:
npm install web3@0.20.5

[Pedro-vk]

Another workaround is the suggested here: angular/angular-cli#1548 (comment)
It replaces the webpack config of @angular/cli

[kmturley]

Ah yes!! this solution with the patch worked:
https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
node: {crypto: true, stream: true}

[kvn29]

@kmturley Thank you !

[antonpegov]

@kmturley I'm not using angular-cli, so I do not have 'node_modules/@angular-devkit/build-angular' folder. Any idea how to solve that problem?

[nivida]

Please ask this on https://ethereum.stackexchange.com/

[anothershubham]

Go to \node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js

and search for node which would be looking like node: false

and replace it with

node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }

Now restart the project.

[aperonam]

@vermadev95 Is there a way of doing this fix editing a file outside node_modules?

[sirhill]

I encountered the issue today again. So far, the nicest fix, I've found for this issue:
angular/angular-cli#1548 (comment)

[attilacsanyi]

For Angular 12 this worked for me
(without patching node_modules)

Workarounds

web3.js issue 4070

• Install the following packages
  
  npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
• Add the following paths to the tsconfig,json:

  {
    "compilerOptions": {
      "paths" : {
        "crypto": ["./node_modules/crypto-browserify"],
        "stream": ["./node_modules/stream-browserify"],
        "assert": ["./node_modules/assert"],
        "http": ["./node_modules/stream-http"],
        "https": ["./node_modules/https-browserify"],
        "os": ["./node_modules/os-browserify"],
      }
    }
  }
  

• Add this to polyfill.ts

  (window as any).global = window;
  import { Buffer } from 'buffer';
  global.Buffer = Buffer;
  global.process = {
      env: { DEBUG: undefined },
      version: '',
      nextTick: require('next-tick')
      } as any;