Using @truffle/contracts in Angular 13 project

[AOUNT]

• [ ] I've opened a support ticket before filing this issue.

---

Issue

I have this error in the browser when using truffle/contract with Angular13:

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at module.exports (vendor.js:145699)
    at Object.646 (vendor.js:145749)
    at __webpack_require__ (runtime.js:23)
    at Object.75290 (vendor.js:144986)
    at __webpack_require__ (runtime.js:23)
    at Object.76348 (vendor.js:145463)
    at __webpack_require__ (runtime.js:23)
    at Object.94450 (vendor.js:88737)
    at __webpack_require__ (runtime.js:23)
    at Object.86302 (vendor.js:88787)

Exactly the same issue than this one:

https://github.com/trufflesuite/truffle/issues/4302

Steps to Reproduce

Create new Angular Project:

ng new angular-tour-of-heroes

Install Web3:

npm install web3 --save

Install @truffle/contract

npm i @truffle/contract

Install the required packages:

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

Add this to polyfils:

import { Buffer } from 'buffer';
/***************************************************************************************************
 * APPLICATION IMPORTS
 */

(window as any).Buffer = Buffer;
(window as any)['global'] = window;
(window as any).process = {
  env: {
    NODE_ENV: 'development',
  },
};

add this to tsconfig.ts:

"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"]
    }

Add this to app.component.ts:

const contract = require('@truffle/contract');

Finally use:

ng serve

Expected Behavior

No error and working contract object I can use in the project.

Environment

• Operating System: MacOS
• Ethereum client:
• Truffle version (truffle version): v5.4.25
• node version (node --version): v17.3.1
• npm version (npm --version): 8.3.0

[kevinweaver]

Hi @AOUNT, thanks for reporting this! We'll look into this, but in the meantime, do you mind confirming that you're using the latest version of @truffle/contract (4.4.4)?

[AOUNT]

Hello @kevinweaver thanks a lot. Yes I am using the 4.4.4 version. I was using the 4.4.3, and I upgraded but I still have the same issue.

[AOUNT]

Hello @kevinweaver do you have any news on this ? thank you !!!

[kevinweaver]

Hi @AOUNT, apologies for the delay. We have not had a chance to look at this issue yet. I will re-surface this with the team and get back to you this week.

[kevinweaver]

Hi @AOUNT, truffle is not supported by node 17. Do you mind downgrading to v12 or v14? In case you aren't aware, odd numbered major node versions are not stable and are generally meant for developers to test new node features in the upcoming even, stable builds. I recommend avoiding odd builds unless that describes your situation.

Also, is your project public and are you able to link to it? Thanks!

[raj713335]

npm install path

Fixed this issue for me

[ngochiencse]

@kevinweaver Hi, I encounter this problem too so I have created a minimal demo for this issue here: https://github.com/ngochiencse/truffle_contract_angular Note: In this demo I use node 16.

[cliffoo]

Hey @AOUNT and @ngochiencse I got @truffle/contract working in angular 13 here, please take a look (npm i and ng serve to try it out). If you're unsure about what's going on have a look at the git history as I've separated the various steps (bootstrapping, adding polyfills, etc.) to get this working.

Let me know if this works for you! Thanks.

[ngochiencse]

@cliffoo have you tried angular 14?

[cliffoo]

I've not, since @AOUNT was specific about using angular 13. I don't imagine angular 14/15 being any different in this regard (you need to install and configure the polyfills).

[lsqproduction]

Closing for issue maintenance. Please open a new issue if you encounter any more problems with this. Thank you