Angular 16+ and Web3js 4.0+ problem solving

[hbthegreat]

Expected behavior

1. Create a brand new Angular Application
2. npm install web3
3. Try a simple test in app.component

import { Component } from '@angular/core';
import { Web3 } from 'web3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  Web3 = new Web3('http://127.0.0.1:8545');
}

4. Able to use the library

Actual behavior

• The first error that is run into is /node_modules/isomorphic-ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
• So I added this to tsconfig as mentioned in many places online

"esModuleInterop": true,
"allowSyntheticDefaultImports": true,

• Still not working and getting errors like:

Uncaught ReferenceError: process is not defined

• I have tried almost every single thing I can find online but haven't had any luck.

Steps to reproduce the behavior

1. ng new my-first-project (needs angular cli)
2. cd my-first-project
3. Edit app.component as above
4. ng serve

Logs

Included above.

Environment

@angular version ^16.1.0 (the latest version)
web3 version ^4.0.3
npm version 9.8.1
node versoin 18.15.0

[avkos]

I've reproduced the error. I will investigate it deeper. thx for your contribution.

[hbthegreat]

Thanks. I appreciate it! Let me know if there are any investigations I can help with on my end.

[avkos]

So the problem is util package
here is some options how to solve it

1. add webpack config to your angular
2. in your case you can just add this code to main.ts

(window as any).process = {
  env: { DEBUG: undefined },
};

here is related issues and threads:
twilio/twilio-client.js#284
browserify/node-util#57 (comment)

[hbthegreat]

Thank you for your help on this @avkos we have tried both suggestions and ended up landing on doing option 2 in a polyfills.ts added to the src directory.

polyfills.ts

(window as any).process = {
  env: { DEBUG: undefined },
};

angular.json (partial file)

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/frontend",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": [
        "zone.js",
        "src/polyfills.ts"
      ],

This gets it all working well especially if the Web3 library is used in a deeper service inside Angular.

[hbthegreat]

Follow up question. Should this remain the long term solution for Angular or is there a patch that could be worked on to assist with this?

[avkos]

this is a temp solution. we will fix this bug inside library

[hbthegreat]

That's great news! Looking forward to it

[luu-alex]

I believe this issue is fixed as we removed polyfills from library, closing