Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 13 clean build is not working with web3.js #4767

Closed
1 task done
ExtremeSwat opened this issue Feb 11, 2022 · 11 comments
Closed
1 task done

Angular 13 clean build is not working with web3.js #4767

ExtremeSwat opened this issue Feb 11, 2022 · 11 comments
Assignees
Labels
1.x 1.0 related issues Bug Addressing a bug P1 High severity bugs

Comments

@ExtremeSwat
Copy link

ExtremeSwat commented Feb 11, 2022

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

@ExtremeSwat ExtremeSwat added the Bug Addressing a bug label Feb 11, 2022
@jdevcs jdevcs added the 1.x 1.0 related issues label Feb 14, 2022
@jdevcs
Copy link
Contributor

jdevcs commented Feb 14, 2022

@luu-alex

@mconnelly8 mconnelly8 added the P1 High severity bugs label Feb 15, 2022
@YakupIpek
Copy link

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

@janhocevar
Copy link

Same issue here

@luu-alex
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

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

@ExtremeSwat
Copy link
Author

ExtremeSwat commented Feb 16, 2022

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

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
Copy link
Contributor

luu-alex commented Feb 16, 2022

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
Copy link

@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
Copy link

YakupIpek commented Feb 17, 2022

@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
Copy link
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1.x 1.0 related issues Bug Addressing a bug P1 High severity bugs
Projects
None yet
Development

No branches or pull requests

6 participants