Inpage script incompatible with Angular 5

[rekmarks]

After doing all the migration updates mentioned and trying to send the transaction, metamask pops-up but when I click confirm, the website is not able to get the transaction hash from MM.

I used the same code as mentioned on the MM Docs, i.e,

const txHash = await ethereum.request({ method: 'eth_sendTransaction', params: [transactionParameters], });

also, this random error is being poping up on Dev Console:

ERROR Error: Uncaught (in promise): TypeError: this._processRequest(...).catch(...).finally is not a function TypeError: this._processRequest(...).catch(...).finally is not a function at e._handle (inpage.js:15) at e.handle (inpage.js:15) at t.exports._rpcRequest (inpage.js:1) at inpage.js:1 at new ZoneAwarePromise (zone.js:875) at t.exports.request (inpage.js:1) at Web3Service.<anonymous> (web3.service.ts:1452)

at line 1452, on web3service, we have:

window['ethereum'].request({ method: 'eth_sendTransaction', params: [ { to: <Address>, from: <currentWallet>, value: "0x0", data: <encodedData> }, ], }).then((txHash) => console.log(txHash)) .catch((error) => console.error);

Any help/input would be amazing

Originally posted by @farhanJR in https://github.com/MetaMask/metamask-extension/issues/8077#issuecomment-723339254

[rekmarks]

@farhanJR, are you running an Angular app by chance? My hypothesis is that something overwrote the Promise global with ZoneAwarePromise, and that it behaves differently and/or has a different API. See: https://www.npmjs.com/package/zone.js

[farhanJR]

yes, correct, I am using Angular 6 app. thanks, i will take a look.

But all of a sudden then happened.

[farhanJR]

@rekmarks I will try to check this global Promise vs ZoneAwarePromise. When I do window.Promise i see its using ZoneAwarePromise.

Have been trying to solve this for sometime without any success

[farhanJR]

@rekmarks just to share, as it said, please report this bug

I see this message on my Dev Console:

{message: "MetaMask: Failed to send site metadata. This is an internal error, please report this bug.", originalError: TypeError: this._processRequest(...).catch(...).finally is not a function at e._handle (chrome-…}message: "MetaMask: Failed to send site metadata. This is an internal error, please report this bug."originalError: TypeError: this._processRequest(...).catch(...).finally is not a function at e._handle (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:15:1258) at e.handle (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:15:937) at sendSiteMetadata (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:21997)__proto__: Object sendSiteMetadata @ inpage.js:1 async function (async) sendSiteMetadata @ inpage.js:1 e @ inpage.js:1

Metamask plugin on chrome.

[rekmarks]

@farhanJR, thank you for reporting that. From the error stack, it looks like the same fundamental problem.

From our perspective, this is fundamentally Angular's problem. Overwriting globals prevents the platform from fulfilling its contract with other third-party code.

Have you tried asking the Angular community or upgrading Angular?

[ikramansari77]

@farhanJR, thank you for reporting that. From the error stack, it looks like the same fundamental problem.

From our perspective, this is fundamentally Angular's problem. Overwriting globals prevents the platform from fulfilling its contract with other third-party code.

Have you tried asking the Angular community or upgrading Angular?

I am also having a similar issue on Angular 5

[farhanJR]

@rekmarks @ikramansari77

was able to solve the issue by updating my Angular App from 5 to 6. (initially i said I was using 6, which was incorrect).

had to do other updates too.

Steps I followed for the updates:

1. npm uninstall -g angular-cli 2. npm cache verify 3. npm install -g @angular/cli@6 4. rm -rf node_modules 5. npm install --save-dev @angular/cli@6 6. npm uninstall --save-dev angular-cli 7. ng update @angular/cli@6 8. ng update @angular/core@6 9. npm install -g rxjs-tslint 10. rxjs-5-to-6-migrate -p src/tsconfig.app.json 11. npm install rxjs-compat --save-dev 12. npm i

You might get some errors on Angular after update but all of them can be resolved easily.

if you see any ERROR like, on ng serve:

node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

go to your main tsconfig.json & add inside compilerOptions object:

"paths": { "@angular/*": ["./node_modules/@angular/*"] }

[rekmarks]

@farhanJR , thank you again for creating this issue. I hope it will be of use to others working with Angular 5 apps.

Since the problem is solved by updating Angular, and for reasons previously mentioned, we will take no action. I will now close this issue.