Module not found: Error: Can't resolve 'crypto'

I am getting the following list of errors when I run ng serve.

My package JSON is as follows:

{   "name": "ProName",   "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-devkit/build-angular": "~0.12.0",
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@types/dotenv": "^4.0.3",
    "@types/errorhandler": "0.0.32",
    "@types/express": "^4.16.0",
    "@types/node": "^10.5.1",
    "apostille-library": "^7.1.0",
    "core-js": "^2.5.4",
    "dotenv": "^6.0.0",
    "errorhandler": "^1.5.0",
    "express": "^4.16.0",
    "nem2-sdk": "^0.9.7",
    "rxjs": "~6.3.3",
    "stream": "0.0.2",
    "tslib": "^1.9.0",
    "typescript": "^2.9.2",
    "zone.js": "~0.8.26"   } }

The error I get :

ERROR in ./node_modules/aws-sign2/index.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/aws-sign2' ERROR in ./node_modules/aws4/aws4.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/aws4' ERROR in ./node_modules/ecc-jsbn/index.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/ecc-jsbn' ERROR in ./node_modules/http-signature/lib/verify.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ERROR in ./node_modules/http-signature/lib/signer.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/http-signature/lib' ERROR in ./node_modules/nem-sdk/build/external/nacl-fast.js Module not found: Error: Can't resolve 'crypto' in '/Users/MYPC/Documents/Myproj/ProName/node_modules/nem-sdk/build/external' ERROR in ./node_modules/nem-sdk/node_modules/aws-sign2/index.js

I ran into a similar issue lately while trying to use another library (tiff.js) in a small project I was experimenting with.

The way I got around this was to add the following to my package.json file, right after the devDependencies section.

"devDependencies": {
    ...
},
"browser": {
    "crypto": false
}

This didn't seem to have any adverse effect when trying to use the library in the application.

Adding this setting in tsconfig.json file under that project resolve this warning

"compilerOptions": {
"baseUrl": "./",
"paths": {
  "crypto": [
    "node_modules/crypto-js"
  ]
}

I like R. Richards's answer, but I thought it would be useful to provide some more information.

This is a known issue with Angular, and the Angular CLI dev team seems to think it's a feature rather than a bug. I, as well as other developers in this issue thread, disagree. Contributors to that thread provided several workaround fixes, but my project didn't compile successfully until I implemented R. Richards' solution. I didn't revert the previous changes, though, so tacnoman's and GrandSchtroumpf's fixes may be of use to others.

Some, like clovis1122 here and others in that issue thread, have questioned why a web app would need access to these libraries and why the necessary tasks can't be completed on the server side instead. I can't speak for everyone, but my use case is that, when authenticating a user account, Strapi responds with a JSON Web Token string that must be decoded by the client. Since the necessary library depends on crypto and stream, you won't be able to extract the JWT expiration time unless those dependencies are available.

In case anyone has trouble extrapolating from R. Richards' answer, you'll have to set to false any dependencies that are showing up in "can't resolve x" errors. For example, the critical part of my package.json is:

    "browser": {
        "crypto": false,
        "stream": false
    }

I thought I would expand on what Tarique Ahmed wrote in his answer.

I was using an npm module that had the following line in the code:

const crypto = require('crypto');

I couldn't add:

"browser": {
  "crypto": false
}

to the package.json because the crypto package had to be part of the build.

It turns out that during the compilation process Angular seems to have decided to install the crypto-browserify package instead of crypto.

Adding the following to the tsconfig.json file instructs the build to use the crypto-browserify library every time that crypto is required. As you can see, I had the same issue for the stream package.

"paths": {
  "crypto": [
    "node_modules/crypto-browserify"
  ],
  "stream": [
    "node_modules/stream-browserify"
  ]
}

After having the same issue with Angular 11 and crypto-js 4 (and manually setting the path in tsconfig.json), I found rolling back crypto-js to version 3.1.9-1 fixed the issue. It seems a change made in version 4 caused the issue.

npm install [email protected]

Explained here in repo issues:

GitHub issue