1

I am trying to create DAPP using Angular 11.1.0. I am able to deploy the contract on Rinkeby test network successfully. But on Client side getting below error on loading Web3@1.3.4 js.

Getting error:
Error: Uncaught (in promise): TypeError: Class extends value undefined is not a constructor or null  
TypeError: Class extends value undefined is not a constructor or null  
    at push.4HPa.module.exports (keccak.js:3)  
    at push.yYxu.module.exports (index.js:5)  
    at Object.aYMp (js.js:1)  
    at __webpack_require__ (bootstrap:84)  
    at Object.wzGL (keccak.js:4)
    at __webpack_require__ (bootstrap:84)
    at Object.6yEv (hash.js:4)
    at __webpack_require__ (bootstrap:84)
    at Object.cAFe (account.js:9)
    at __webpack_require__ (bootstrap:84)  
    at resolvePromise (zone-evergreen.js:1209)  
    at resolvePromise (zone-evergreen.js:1163)
    at zone-evergreen.js:1275  
    at ZoneDelegate.invokeTask (zone-evergreen.js:402)  
    at Object.onInvokeTask (core.js:28481)  
    at ZoneDelegate.invokeTask (zone-evergreen.js:401)  
    at Zone.runTask (zone-evergreen.js:174)  
    at drainMicroTaskQueue (zone-evergreen.js:578)  

This is my config: Angular 11.1.0 and web3 1.3.4

This is my code:

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

declare let require: any;
declare let window: any;

@Injectable({
  providedIn: 'root'
})
export class TransferService implements OnInit {  
  private _web3: any;  

  constructor() {  
    if (typeof window.web3 !== 'undefined') {        
      this._web3 = new Web3(window.web3.currentProvider);        
  }  
 }  
}  

In polyfills.ts added below

declare var require: any;  
declare var global: any;  
(window as any).process = {  
  env: { DEBUG: undefined },  
  version: ''  
};  
(window as any).global = window;  
global.Buffer = global.Buffer || require('buffer/').Buffer;  

Please guide me to solve this as I am stuck with this issue for 2 days now.

0

Because one of the libraries use stream module and other modules that exist only in Node.js but not in browsers. You will need to install a bunch of browserify modules in npm and then also add those modules to tsconfig.json.

Since Angular/Ionic use Webpack to optimize script output, you can install all of the browserify modules into your project, and Webpack will ensure that only the modules used will be included in the build bundle.js.

Straight to the solution:

Go to the project root directory and run the following command to install packages:

npm i buffer process stream-browserify os-browserify crypto-browserify stream-http https-browserify console-browserify constants-browserify domain-browser events path-browserify querystring timers-browserify tty-browserify url util browserify-zlib string_decoder punycode

Insert to in tsconfig.json (inside compilerOptions property):

"baseUrl": "./",
"paths": {
  "stream": [
    "./node_modules/stream-browserify"
  ],
  "os": [
    "./node_modules/os-browserify"
  ],
  "crypto": [
    "./node_modules/crypto-browserify"
  ],
  "http": [
    "./node_modules/stream-http"
  ],
  "https": [
    "./node_modules/https-browserify"
  ],
  "console": [
    "./node_modules/console-browserify"
  ],
  "constants": [
    "./node_modules/constants-browserify"
  ],
  "domain": [
    "./node_modules/domain-browser"
  ],
  "events": [
    "./node_modules/events"
  ],
  "path": [
    "./node_modules/path-browserify"
  ],
  "querystring": [
    "./node_modules/querystring"
  ],
  "timers": [
    "./node_modules/timers-browserify"
  ],
  "tty": [
    "./node_modules/tty-browserify"
  ],
  "url": [
    "./node_modules/url"
  ],
  "util": [
    "./node_modules/util"
  ],
  "zlib": [
    "./node_modules/browserify-zlib"
  ],
  "string_decoder": [
    "./node_modules/string_decoder"
  ],
  "assert": [
    "./node_modules/assert"
  ],
  "punycode": [
    "./node_modules/punycode"
  ]
}

Additionally, you also need to insert process and Buffer polyfills into global context.

Add the following to polyfills.ts (usually inside src directory):

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
global.process = require('process');

Final step: Ensure that you didn't disable any of above modules. Open up package.json file, and remove the browser property if there's any.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.