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' #23398

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

Comments

Projects
None yet
5 participants
@naturalfreak

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"
  }

@splincode

This comment has been minimized.

Show comment
Hide comment
@splincode

splincode Apr 17, 2018

Contributor

And here is the angular? This is a problem with another package
Either make a repository on the github with an error

Contributor

splincode commented Apr 17, 2018

And here is the angular? This is a problem with another package
Either make a repository on the github with an error

@jasonaden

This comment has been minimized.

Show comment
Hide comment
@jasonaden

jasonaden Apr 17, 2018

Contributor

It appears to be a problem with your dependencies trying to import from web3. Please file an issue on that project.

Contributor

jasonaden commented Apr 17, 2018

It appears to be a problem with your dependencies trying to import from web3. Please file an issue on that project.

@jasonaden jasonaden closed this Apr 17, 2018

@isaackwan

This comment has been minimized.

Show comment
Hide comment
@isaackwan

isaackwan May 5, 2018

I actually have the same the same problem. The issue here is that from Angular 6 on, apparently the node module polyfills from webpack are not bundled.

This is not a problem previously, because (1) they are bundled, except the crypto module and (2) even if they were not, we can edit the webpack config file by ejecting.

Currently eject is no longer possible:

The 'eject' command has been temporarily disabled, as it is not yet compatible with the new
angular.json format. The new configuration format provides further flexibility to modify the
configuration of your workspace without ejecting. Ejection will be re-enabled in a future
release of the CLI.

Will post more updates/create new issue as I gather more information. Thanks.

-- Update --
Great, the file's location has changed before Angular CLI v6

Before: https://github.com/angular/angular-cli/blob/v1.7.4/packages/%40angular/cli/models/webpack-configs/browser.ts#L111

    node: {
      fs: 'empty',
      global: true,
      crypto: 'empty',
      tls: 'empty',
      net: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

After: https://github.com/angular/devkit/blob/v6.0.0/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L128

node: false,

isaackwan commented May 5, 2018

I actually have the same the same problem. The issue here is that from Angular 6 on, apparently the node module polyfills from webpack are not bundled.

This is not a problem previously, because (1) they are bundled, except the crypto module and (2) even if they were not, we can edit the webpack config file by ejecting.

Currently eject is no longer possible:

The 'eject' command has been temporarily disabled, as it is not yet compatible with the new
angular.json format. The new configuration format provides further flexibility to modify the
configuration of your workspace without ejecting. Ejection will be re-enabled in a future
release of the CLI.

Will post more updates/create new issue as I gather more information. Thanks.

-- Update --
Great, the file's location has changed before Angular CLI v6

Before: https://github.com/angular/angular-cli/blob/v1.7.4/packages/%40angular/cli/models/webpack-configs/browser.ts#L111

    node: {
      fs: 'empty',
      global: true,
      crypto: 'empty',
      tls: 'empty',
      net: 'empty',
      process: true,
      module: false,
      clearImmediate: false,
      setImmediate: false
    }

After: https://github.com/angular/devkit/blob/v6.0.0/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L128

node: false,
@Pedro-vk

This comment has been minimized.

Show comment
Hide comment
@Pedro-vk

Pedro-vk May 9, 2018

This error has been happening on Angular several times... The issue was closed so quickly...
Probably is related to: angular/angular-cli#1548
People on Web3 repository is reporting the same error after upgrade to Angular 6: ethereum/web3.js#1555 (comment)

Pedro-vk commented May 9, 2018

This error has been happening on Angular several times... The issue was closed so quickly...
Probably is related to: angular/angular-cli#1548
People on Web3 repository is reporting the same error after upgrade to Angular 6: ethereum/web3.js#1555 (comment)

@Pedro-vk

This comment has been minimized.

Show comment
Hide comment
@Pedro-vk

Pedro-vk commented May 9, 2018

I've used this workaround: angular/angular-cli#1548 (comment)

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