Skip to content

Instantly share code, notes, and snippets.

@niespodd
Last active May 8, 2023 09:07
Show Gist options
  • Star 82 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save niespodd/1fa82da6f8c901d1c33d2fcbb762947d to your computer and use it in GitHub Desktop.
Save niespodd/1fa82da6f8c901d1c33d2fcbb762947d to your computer and use it in GitHub Desktop.
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);
});
});
// ----
@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

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

Works!

@phpgeekfr
Copy link

also working for secp256k1 lib in angular 7. Thanks

@iamcco
Copy link

iamcco commented Aug 27, 2019

works! thanks

@VictorSalgado
Copy link

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

Works!!!Thanks

@stories2
Copy link

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

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

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

#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

@junaidahmed501
Copy link

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

It should be obvious that it won't work for Angular 14 as well because there is no browser.js file in the path "node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js"

@zfyzjzzl
Copy link

zfyzjzzl commented May 8, 2023

It should be obvious that it won't work for Angular 14 as well because there is no browser.js file in the path "node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js"

Yes I was modifying browser.js as well, but now it's gone, and I find a new way:
My currently version: @angular/cli@v15.2.7", electron": "^24.1.3", "electron-builder": "^23.6.0".

APPROCH 1:

  1. You need the @angular-builders/custom-webpack, (for me, I just use the latest release and it is ^15.0.0, you may need to adjust in future)
    npm install --save-dev @angular-builders/custom-webpack@^15.0.0
  2. update angular.json:
"your-app-name":{
       "architect": {
              "build": {
                      "builder": "@angular-builders/custom-webpack:browser",
                      "options": {
                        "customWebpackConfig": {
                             "path": "./extra-webpack.config.js"
                        },
              "serve": {
                      "builder": "@angular-builders/custom-webpack:dev-server",
                      "options": {
                           "browserTarget":"your-app-name:build"
                      },
...
  1. extra-webpack.config.js
module.exports = {target:'electron-renderer'}

APPROCH 2: Here again we modify the config file :p
Your scripts now should update this file: node_modules\@angular-devkit\build-angular\src\webpack\configs\common.js
And make sure the target will be replaced to 'electron'-renderer' only.
replace old > target: [isPlatformServer ? 'node' : 'web', 'es2015'],
to > target: ['electron-renderer'],

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