Angular 6 many Can't resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)

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         


        

Answer 1

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 2

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);
  });
});

package.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 3

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
}

Answer 4

If the none of the above helped, I just lost 4 hours diagnosing why an Angular app that compiled yesterday now wouldn't compile due to "Module Not Found" errors.

The problem was that yesterday when I imported a class in one of my components, WebStorm pointed to an identically-named class in my backend node app like this:

import { ClassName } from '../../../../../../../../my-node-server-app/class-name';

It was then trying to compile all of the Node-specific modules that aren't compatible with an ES2015 browser app. If you're having the same problem and none of the above helps, check your imports! Hope I saved someone's sanity out there.

Answer 5

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 6

I just ran into this issue as someone new to Angular, and all these other answers are actually giving you workarounds for something that shouldn't be worked around (in most cases). Actually, you need to step back and consider that you are doing something the framework does not want you to do.

In my case, what happened was, I added a dependency on a library for accessing an external API service and I tried to import it in an Angular "service". I'm still new to Angular and am coming from a C# WCF background, so in my head, a service is a server-side process. However, nothing in Angular is server-side! It is a strictly client-side framework that runs in the browser.

The way to fix this for me was to realise that my Angular service needs to strictly communicate with my own back-end, not outside websites, which meant an API that I was going to need to write myself, separately. In my case, I'm going with a MEAN stack, so this means creating an Express.js API that will communicate with the external API for me on the back-end. This has added advantages, such as being able to cache session data and other data from the external API in a Mongo database, instead of needing a fresh client-side API session every time, which would quickly exceed the daily sessions this site allows of 7500 a day, assuming I got a lot of users.

TL;DR the fix is to remove any imports to NPM packages not intended for front-end work, that require such packages like https, crypto and fs. The fs is a particular red flag. I think this implies 'file system', which your front-end certainly shouldn't have access to directly.