Angular 13 clean build is not working with web3.js

[ExtremeSwat]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

After following the instructions mentioned for Angular versions >= 11 I still can't ng-serve ng-build

Expected Behavior

to be able to ng-serve

Steps to Reproduce

After installing web3js off npm, I've also installed the other packages:
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

Added within tsconfig.json the following:

{
    "compilerOptions": {
        "paths" : {
        "crypto": ["./node_modules/crypto-browserify"],
        "stream": ["./node_modules/stream-browserify"],
        "assert": ["./node_modules/assert"],
        "http": ["./node_modules/stream-http"],
        "https": ["./node_modules/https-browserify"],
        "os": ["./node_modules/os-browserify"],
    }
}

And finally in the polyfills.ts the following:
import { Buffer } from 'buffer';

(window as any).global = window;
global.Buffer = Buffer;
global.process = {
    env: { DEBUG: undefined },
    version: '',
    nextTick: require('next-tick')
} as any;

As far as I can see it fails in the polyfills.ts with:
Error: src/polyfills.ts:56:2 - error TS2304: Cannot find name 'global'.

56  global.Buffer = Buffer;
Error: src/polyfills.ts:57:2 - error TS2304: Cannot find name 'global'.
57  global.process = {
Error: src/polyfills.ts:60:16 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.
60      nextTick: require('next-tick')

Web3.js Version

1.7.0

Environment

• Operating System: Windows 11
• Browser: Edge Chromium / Brave
• Node.js Version: 17.5.0
• NPM Version: 8.5.0

Anything Else?

Added a zip file of my repo sample:
https://1drv.ms/u/s!Av4UoFRH90CIhZAQ4ISteiR6hbRdNQ?e=i4oAOQ

[jdevcs]

@luu-alex

[YakupIpek]

I spent hours on same issue :( We need help asap.

[janhocevar]

Same issue here

[luu-alex]

Seems like there was a breaking change from angular 12 to 13. I'll look into this but if you want a version that works use angular 12 for now

[luu-alex]

Sorry, its not a breaking change from angular 12 to angular 13, something broke when web3 upgraded from 1.6.1 to 1.7.0 related to #4756. Until there is a fix the solution would be instead of using const web3 = require("web3"), use import web3 from 'Web3'; and your angular project should work

[YakupIpek]

We already use import statement and issue is exist on Angular 12 as well :(

[ExtremeSwat]

I was able to make it run.
All I had to do was to add two additional packages :

• url
• xhr2-cookies

Unfortunately there's some warnings popping out :
Apart from that the MM (or default crypto wallet) should pop out after ng-serving

Warning: D:\...\CryptoZombies\crypto-zombies-angular\node_modules\@ethersproject\signing-key\lib.esm\elliptic.js depends on 'hash.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: D:\....\crypto-zombies-angular\src\app\app.component.ts depends on 'web3'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Here's a sample repo, unfortunately I had to upload it to the cloud since I can't attach zip files for some reason. OneDrive link

[luu-alex]

hmmmm @YakupIpek do you get the same error as @ExtremeSwat? You can try out his solution, or downgrade the version of web3js to 1.6.1

[YakupIpek]

@luu-alex This is what i get after installing those packages. I will try to downgrade to 1.6.1

Error: src/polyfills.ts:59:1 - error TS2304: Cannot find name 'global'.

59 global.Buffer = Buffer;
   ~~~~~~


Error: src/polyfills.ts:59:17 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

59 global.Buffer = Buffer;
                   ~~~~~~


Error: src/polyfills.ts:60:1 - error TS2304: Cannot find name 'global'.

60 global.process = {
   ~~~~~~


Error: src/polyfills.ts:63:13 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

63   nextTick: require('next-tick')

[YakupIpek]

@luu-alex
I downgraded to 1.6.1 and import Web3 from web3; I use this import statement and i am not able to import types like Contract. It is because i am on 1.6.1 ?

[luu-alex]

@YakupIpek you should be able to import types like contract, 1.6.1 has it https://github.com/ChainSafe/web3.js/blob/release/1.6.1/packages/web3-eth-contract/types/index.d.ts#L25