New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Can't resolve 'crypto' #1555

Closed
naturalfreak opened this Issue Apr 16, 2018 · 13 comments

Comments

Projects
None yet
@naturalfreak
Copy link

naturalfreak commented Apr 16, 2018

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

This comment has been minimized.

Copy link

Fi1osof commented Apr 16, 2018

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

This comment has been minimized.

Copy link

naturalfreak commented Apr 16, 2018

I'm using node version 9.11.1

@echozhangzy8888

This comment has been minimized.

Copy link

echozhangzy8888 commented Apr 27, 2018

I have same problem ,my node version is also 9.11.1

@wtubog

This comment has been minimized.

Copy link

wtubog commented Apr 28, 2018

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

This comment has been minimized.

Copy link

kmturley commented May 10, 2018

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

@Pedro-vk

This comment has been minimized.

Copy link

Pedro-vk commented May 10, 2018

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

@kmturley

This comment has been minimized.

Copy link

kmturley commented May 10, 2018

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

This comment has been minimized.

Copy link

kvn29 commented May 14, 2018

@kmturley Thank you !

@antonpegov

This comment has been minimized.

Copy link

antonpegov commented Jul 18, 2018

@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

This comment has been minimized.

Copy link
Collaborator

nivida commented Aug 10, 2018

@vermadev95

This comment has been minimized.

Copy link

vermadev95 commented Dec 4, 2018

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

This comment has been minimized.

Copy link

aperonam commented Dec 16, 2018

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

@sirhill

This comment has been minimized.

Copy link

sirhill commented Jan 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment