Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Making web3/bitcore-lib work with Angular 6-11 and >=11
{...
"scripts": {
"postinstall": "node patch.js",
...
}
}
// Angular >= 11
const fs = require('fs')
const f = 'node_modules/@angular-devkit/build-angular/src/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: "empty"}')
fs.writeFile(f, result, 'utf8', function(err) {
if (err) return console.log(err)
})
});
// ----
// For Angular <11
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);
});
});
// ----
@pointtoken
Copy link

pointtoken commented Oct 25, 2018

You rule!

@Sabrinsulthana
Copy link

Sabrinsulthana commented Nov 5, 2018

@literalpie
Hi guys,
This works fine for me. Just get into the node-modules, and move into the browser.js file and change the node: {crypto: true, stream: true}
---node_modules/angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js---
Thanks!!!

@ClaudeSutterlin
Copy link

ClaudeSutterlin commented Nov 19, 2018

This same fix worked for the jsforce library.

@maxim2muchcoffee
Copy link

maxim2muchcoffee commented Nov 20, 2018

Still works for angular 7.0.0 with web3 v.1.0.0-beta.36, thank you

@Komal-bansal
Copy link

Komal-bansal commented Nov 24, 2018

Thank you so much, i was struggling with this error from last two days.

@SamuelMarks
Copy link

SamuelMarks commented Nov 29, 2018

Thanks, worked with Angular 7.1 with js-git.

@markvdesign
Copy link

markvdesign commented Dec 26, 2018

I was having trouble getting this to work but after I deleted the node_modules folder and run npm install again it worked.

@AaronBastian
Copy link

AaronBastian commented Jan 17, 2019

awesome. thank you!!!

@savefolla
Copy link

savefolla commented Jan 24, 2019

Thanks a lot!

@imvikaskohli
Copy link

imvikaskohli commented Jan 31, 2019

It also works for me. But I run node patch.js and then run the angular project. Thanks man

@whisoer
Copy link

whisoer commented Feb 18, 2019

Using var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}'); works for me!
Thx!

Angular - 7.2.3

@vishal4799
Copy link

vishal4799 commented Feb 24, 2019

I was getting 'fs' error for ExtJs in angular v7.
I applied above solution and got rid of fs error but getting below error on ng serve :
"No browser version for node.js core module fs available"

@ingeJulianLasso
Copy link

ingeJulianLasso commented Mar 28, 2019

@literalpie
Hi guys,
This works fine for me. Just get into the node-modules, and move into the browser.js file and change the node: {crypto: true, stream: true}
---node_modules/angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js---
Thanks!!!

Angular CLI: 7.3.6
Node: 10.15.3
OS: linux x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.6
@angular-devkit/build-optimizer   0.13.6
@angular-devkit/build-webpack     0.13.6
@angular-devkit/core              7.3.6
@angular-devkit/schematics        7.3.6
@angular/cdk                      7.3.5
@angular/cli                      7.3.6
@angular/material                 7.3.5
@ngtools/webpack                  7.3.6
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

@t8
Copy link

t8 commented Apr 7, 2019

I've been stuck on an issue similar to this for over two weeks now and nobody has been able to fix my issue. This fixed it. THANK YOU

@keaukraine
Copy link

keaukraine commented Apr 16, 2019

A better approach is to patch Angular's webpack config using customWebpackConfig feature of angular-builders.
It allows merging configs or patching it with custom processing function without monkey-patching angular code in node_modules.

https://github.com/meltedspark/angular-builders

https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack#Custom-webpack-server

@borch84
Copy link

borch84 commented Apr 28, 2019

Hi, I was getting this error:

ERROR in ./node_modules/aws-iot-device-sdk/device/lib/tls.js [ng] Module not found: Error: Can't resolve 'tls' in '/home/borch/Documents/Ionic/aws-iot-mqtt-client/node_modules/aws-iot-device-sdk/device/lib' [ng] ℹ 「wdm」: Failed to compile.

Then modified the patch.js file with this content:

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: \'empty\', net: \'empty\', tls: \'empty\'}');

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

I have removed node_modules and rerun npm install on my application root folder and now my ionic application compiles, I am not seeing anymore Can't resolve 'tls'

However, when I inspect the console from my web browser and I getting another error:

filesys.existsSync is not a function

I wonder if this is related to the path itself?

@makaaboune
Copy link

makaaboune commented Jun 25, 2019

Works!

@phpgeekfr
Copy link

phpgeekfr commented Jul 15, 2019

also working for secp256k1 lib in angular 7. Thanks

@iamcco
Copy link

iamcco commented Aug 27, 2019

works! thanks

@VictorSalgado
Copy link

VictorSalgado commented Sep 23, 2019

Hi, I was getting this error:

ERROR in ./node_modules/aws-iot-device-sdk/device/lib/tls.js [ng] Module not found: Error: Can't resolve 'tls' in '/home/borch/Documents/Ionic/aws-iot-mqtt-client/node_modules/aws-iot-device-sdk/device/lib' [ng] ℹ 「wdm」: Failed to compile.

Then modified the patch.js file with this content:

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: \'empty\', net: \'empty\', tls: \'empty\'}');

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

I have removed node_modules and rerun npm install on my application root folder and now my ionic application compiles, I am not seeing anymore Can't resolve 'tls'

However, when I inspect the console from my web browser and I getting another error:

filesys.existsSync is not a function

I wonder if this is related to the path itself?

I'm having this same issue. Did you solve this? Thanks in advance.

@nareshnelluri
Copy link

nareshnelluri commented Feb 19, 2020

Works!!!Thanks

@stories2
Copy link

stories2 commented Apr 17, 2020

Anyone can explain why it works?

@AndreasGassmann
Copy link

AndreasGassmann commented Dec 10, 2020

The path of the config files changed in angular 11, so the new file looks like this:

const fs = require('fs')
const f = 'node_modules/@angular-devkit/build-angular/src/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: "empty"}')

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

@Viterbo
Copy link

Viterbo commented Dec 27, 2020

I've made an app template for myself and I included the following patch, based on same idea.

const file1 = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
const file2 = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js';

function doReplace(f, cb) {
  fs.readFile(f, 'utf8', function (err,data) {
    if (err) {
        return cb(false);
    }
    var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');
    fs.writeFile(f, result, 'utf8', function (err) {
      if (err) {
        console.log(err);
        return cb(false);
      } else {
        console.log('\x1b[36mCan\'t resolve \'stream\'\x1b[0m', "->", '\x1b[32mPROBLEM FIXED!\x1b[0m');
        return cb(true);
      }
    });
  });  
}


doReplace(file1, function(success) {
  if (!success) {
    doReplace(file2, function(success) {
      if (!success) {
        console.error("ERROR: couldn't patch the CipherBase constructor problem with stream.Transform.")
      }
    });
  }
});

@Kyatipov
Copy link

Kyatipov commented Mar 28, 2021

I cannot find same file

@thirupathireddygopal
Copy link

thirupathireddygopal commented Apr 26, 2021

OMG, It worked, I did not come over that we must once run npm install after writing this file in order to replace the content added in patch.js file to the node_modules location which we mentioned, got to know after 1 whole day

@JamalMohammed143
Copy link

JamalMohammed143 commented Jun 2, 2021

If this doesn't work for you just run 'node patch.js' from the command line once everything else has installed and that will apply the patch for you.

Yes, thank you very much, its works for me

@sdykae
Copy link

sdykae commented Jun 28, 2021

Deprecated:
instead

  resolve: {
    fallback: {
      crypto: false, //add any other libs you need
    },
  }

@joanmcruzat
Copy link

joanmcruzat commented Dec 16, 2021

#14 90.92 Error: Cannot find module '/opt/project/patch.js'
#14 90.92 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
#14 90.92 at Function.Module._load (internal/modules/cjs/loader.js:725:27)
#14 90.92 at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
#14 90.92 at internal/main/run_main_module.js:17:47 {
#14 90.92 code: 'MODULE_NOT_FOUND',
#14 90.92 requireStack: []
#14 90.92 }

im having error on jenkins build can someone help me ?

@crhistianramirez
Copy link

crhistianramirez commented Jan 20, 2022

This solution doesn't seem to work anymore at least not in angular v13. Check out new solution here

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