Angular

Angular 6 – Cannot resolve crypto, fs, net, path, stream when building Angular

My current setup is Angular 6.1.0 with Angular Universal too but the project is based on an old (dead) project which was built on Angular 5. Upon building the server side assets, the builder throws a lot of error saying it cannot resolve crypto, or it cannot resolve fs, net, path, stream and some others. I just did a quick and dirty fix for now.

Update

The temporary solution is so annoying that I gave up and use the semi-permanent solution until Angular or Webpack applies some fix to this. See update at the bottom.

Overview

The error is thrown by the Webpack compiler script. Note that the missing modules are built-in node modules. The issue has been reported all over the Angular and Webpack Github issues but they seem to be confused on who needs to fix it, therefore, I just followed the quick and dirty fix I’ve found on one of the comments from Github.

Annoying Fix

The issue is that the Webpack config generated in this Angular project configured node to have the modules not loaded. Therefore, the fix is to modify the parameters to include these missing modules.

On every update of your node packages, edit this file:

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

Find the node key parameter and change the value from:

node: false

to:

node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }

Note that if you upgrade your packages, most likely, you have to repeat this process again. You can build an automated script but I’ll do it manually for now.

Auto update Webpack config on every package install/update

The automated script to patch the Webpack config is based on these Github comments and Gist:

Angular CLI comment.

Github Gist where the script is based upon.

My tweak is simply to change the path since the comments above are a bit outdated.

Update package.json and add this line into the scripts section.

"scripts": {
  ...
  "postinstall": "node patch-webpack.js"
  ...
}

Then create the patch script patch-webpack.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);
  }
  let result = data.replace(/node: false/g, "node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}");

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

That’s it! This is way better!

11 thoughts on “Angular 6 – Cannot resolve crypto, fs, net, path, stream when building Angular”

  1. Thank you – I have been searching the web for hours to resolve the above errors, your solution works like a charm.

  2. This works great. I also had “No browser version for node.js core module tls available”, so adding

    tls: ’empty’

    to the node field did the trick.

  3. also i have error when i give dependency injection in constructor
    Uncaught TypeError: Cannot read property ‘prototype’ of undefined
    at Object. (response.js:42)
    at Object../node_modules/express/lib/response.js (response.js:1137)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/express/lib/express.js (express.js:22)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/express/index.js (index.js:11)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/not-found/not-found.component.ts (main.js:678)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app-routing.module.ts (main.js:191)

    This error appears when i add private platformId: Object,
    private appId: string,
    private response: Response,
    private titleService: Title in constructor

  4. @Divyansh not sure what went wrong with your setup, I have this in my page using Angular 7.2.1.

    Note that I am using Angular universal.

      constructor(
        private titleService: Title,
        @Inject(PLATFORM_ID) private platformId: Object,
        @Inject(APP_ID) private appId: string
      ) {
        this.titleService.setTitle('Sample title');
      }
    

    Maybe you are missing the @Inject part?

  5. I also tried but still it is giving
    Module not found: Error: Can’t resolve ‘fs’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\mime’
    ERROR in ./node_modules/send/index.js
    Module not found: Error: Can’t resolve ‘fs’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\send’
    ERROR in ./node_modules/express/lib/request.js
    Module not found: Error: Can’t resolve ‘net’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\express\lib’

  6. @lyappan – what Angular version are you using? If you are using the latest, I think this issue has been fixed already.

  7. Seems like the browser.js file has moved in Angular 11
    to node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js

Leave a reply

Your email address will not be published. Required fields are marked *