Solvedweb3.js Cannot find name 'Buffer'. Can't find module 'net'.

Expected behavior

Ionic/Angular handles the Web3 import fine and serves project

Actual behavior

I get an error stating that the name 'Buffer' cannot be found and that the 'net' module cannot be found, it then suggests me to install @types/node. After I install it, I get the same error.

Steps to reproduce the behavior

1. Start a new Ionic project
2. Install Web3 like so - npm install --save web3
3. Install node types like so - npm install --save-dev @types/node
4. run ionic serve -c and get the error found below

Error Logs

[ng] ERROR in node_modules/web3-bzz/types/index.d.ts(28,27): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-bzz/types/index.d.ts(30,60): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-core/types/index.d.ts(20,22): error TS2307: Cannot find module 'net'.
[ng] node_modules/web3-providers/types/index.d.ts(23,22): error TS2307: Cannot find module 'net'.
[ng] node_modules/web3-utils/types/index.d.ts(71,54): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3-utils/types/index.d.ts(72,48): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
[ng] node_modules/web3/types/index.d.ts(22,22): error TS2307: Cannot find module 'net'.
[ng]
[ng] i ｢wdm｣: Failed to compile.

Versions

NPM version 6.4.1, NodeJS version 10.13.0, Ionic CLI v4.9.0, Ionic framework v4, @anglular/cli version 7.2.3, web3: ^1.0.0-beta.41

Side notes

I'm using ionic v4 which just released, it uses Angular as the main frontend framework though. I tried installing @types/node as a developer dependency and normally, either way it didn't work. Would be happy to provide more information if requested, or if anyone knows a version of web3 that works with angular, I'd be happy to try that out too.

ahhh i think i found your issue, this is a mismatch issue with the angular-cli-files default browser.js settings and is something you have to fix to get web3 to work on angular apps.

if you create a file called patch.js in the root of the angular app

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

then in your package.json under scripts add "postinstall": "node patch.js"

run npm install again and then ng build will all work and you shouldn't have anymore issues.

This is because we have to replace the node:false in the /angular-cli-files/models/webpack-configs/browser.js with 'node: {crypto: true, stream: true}' to allow web3 to work with angular (as they enforce node: false.)

I just did that and boom worked on your repo:

I will look further into this and try to find a way we can fix this within the install of web3 as its pretty annoying to have to add the above and hard to know how to sort if you not came across it before.

Cheers @RohanKapurDEV

ahhh i think i found your issue, this is a mismatch issue with the angular-cli-files default browser.js settings and is something you have to fix to get web3 to work on angular apps.

if you create a file called patch.js in the root of the angular app

[truncate... se the original post above]

I will look further into this and try to find a way we can fix this within the install of web3 as its pretty annoying to have to add the above and hard to know how to sort if you not came across it before.

Cheers @RohanKapurDEV

Just in case someone is not finding the file, at this moment I am using Angular 11.2.8 and web3 1.3.5
I solved this issue by following the suggest above, but the file to change is here
\node_modules@angular-devkit\build-angular\src\webpack\configs\browser.js

the line 82 of this file has to be changed from
node: false
to
node: {crypto: true, stream: true}
just @joshstevens19 says and following the rest. It works for me.
Thanks