Angular 6 many Can't resolve errors (crypto, f

Question

I'm building an Angular 6 app, but every time I want to serve to localhost, I get these errors:

ERROR in ./node_modules/aws-sign2/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\aws-sign2'
ERROR in ./node_modules/aws4/aws4.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\aws4'
ERROR in ./node_modules/ecc-jsbn/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\ecc-jsbn'
ERROR in ./node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib'
ERROR in ./node_modules/http-signature/lib/verify.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib'
ERROR in ./node_modules/oauth-sign/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\oauth-sign'
ERROR in ./node_modules/request/lib/oauth.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request\lib'
ERROR in ./node_modules/request/lib/helpers.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request\lib'
ERROR in ./node_modules/request/lib/hawk.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request\lib'
ERROR in ./node_modules/sshpk/lib/signature.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/private-key.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/certificate.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/fingerprint.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/key.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/dhe.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/identity.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/utils.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/sshpk/lib/formats/pem.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/sshpk/lib/formats/ssh-private.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/sshpk/lib/formats/openssh-cert.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats'
ERROR in ./node_modules/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request\lib'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent'
ERROR in ./node_modules/http-signature/lib/signer.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'http' in 'C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'https' in 'C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'https' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'https' in 'C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent'
ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\sorou\projects\tunrWeb\node_modules\tough-cookie\lib'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent'
ERROR in ./node_modules/mime-types/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\sorou\projects\tunrWeb\node_modules\mime-types'
ERROR in ./node_modules/assert-plus/assert.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\assert-plus'
ERROR in ./node_modules/combined-stream/lib/combined_stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\combined-stream\lib'
ERROR in ./node_modules/delayed-stream/lib/delayed_stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\delayed-stream\lib'
ERROR in ./node_modules/isstream/isstream.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\isstream'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request'
ERROR in ./node_modules/sshpk/lib/ed-compat.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib'
ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent'
ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent'
ERROR in ./node_modules/request/request.js
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\sorou\projects\tunrWeb\node_modules\request'

This is my package.json:

{
  "name": "tunr-web",
  "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": "^6.0.7",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular-svg-round-progressbar": "^2.0.0",
    "angularfire2": "^5.0.0-rc.11",
    "core-js": "^2.5.4",
    "firebase": "^5.1.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "ng-scrollreveal": "^2.2.0",
    "ng2-scroll-to-el": "^1.2.1",
    "ngx-facebook": "^2.4.0",
    "ngx-infinite-scroll": "^6.0.1",
    "ngx-sharebuttons": "^4.1.4",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "time-ago-pipe": "^1.3.2",
    "youtube-search": "^1.1.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/scrollreveal": "0.0.3",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Does somebody know what is going wrong? None of the modules mentioned above exist in my node_modules file (I can install some of them, but 'crypto', for example, is built in now). How can I get those folders? It's driving me nuts.

Answer 1

You have to find the node packages added as dependencies which is causing this issue. Open package-lock.json, search for crypto can find the chain of dependencies leading to the package name included in dependencies section of package.json. In my case, most of these libraries were brought in with npm package 'request'.

Answer 2

The current version of Angular-cli doesn't install some packages like zlib which the older versions did. You may have to install some packages manually to resolve these errors.

Answer 3

You are using the latest version of Angular CLI. Some npm packages are 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.

To fix your issue with crypto, stream libs, go to,

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

file and do the following change,

`node: {crypto: true, stream: true}`

Answer 4

Use ngx-build-plus package - https://github.com/manfredsteyer/ngx-build-plus - and provide the additional configuration. This way you don't have to manually update the node modules files everytime you do an install.

Answer 5

You can user patch file solve this problem.

patch.js

    const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

packege.json

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node patch.js && ng build",
"build-prod": "node patch.js && ng build --configuration=production",
"build-staging": "node patch.js && ng build --configuration=staging"

}

make sure to "build" the code before "ng serve" only for the first time.

Answer 6

This is caused by dependencies importing node modules that are not available in the browser. Add to your package.json the modules that give errors:

"browser": {
    "http": false,
    "https":false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false
}