Moralis Integration in Ionic Angular (typescript)

Can you post the full error?

./node_modules/cipher-base/index.js:3:16-43 - Error: Module not found: Error: Can't resolve 'stream' in '/Users/macpro/Projects/moralis-testing/node_modules/cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js:8:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/macpro/Projects/moralis-testing/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js:8:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/macpro/Projects/moralis-testing/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/ethereumjs-util/dist/index.js:17:13-30 - Error: Module not found: Error: Can't resolve 'assert' in '/Users/macpro/Projects/moralis-testing/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/safe-event-emitter/index.js:1:13-28 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/safe-event-emitter'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/web3-provider-engine/index.js:3:17-41 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/web3-provider-engine'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/web3-provider-engine/subproviders/fixture.js:1:17-41 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/web3-provider-engine/subproviders/hooked-wallet.js:12:17-41 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/web3-provider-engine/subproviders/nonce-tracker.js:1:17-41 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/web3-provider-engine/subproviders'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/web3-provider-engine/util/stoplight.js:3:17-41 - Error: Module not found: Error: Can't resolve 'util' in '/Users/macpro/Projects/moralis-testing/node_modules/web3-provider-engine/util'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:37:11-26 - Error: Module not found: Error: Can't resolve 'http' in '/Users/macpro/Projects/moralis-testing/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:39:12-28 - Error: Module not found: Error: Can't resolve 'https' in '/Users/macpro/Projects/moralis-testing/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:41:9-22 - Error: Module not found: Error: Can't resolve 'os' in '/Users/macpro/Projects/moralis-testing/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

./node_modules/xhr2-cookies/dist/xml-http-request.js:43:10-24 - Error: Module not found: Error: Can't resolve 'url' in '/Users/macpro/Projects/moralis-testing/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }


[ERROR] An error occurred while running subprocess ng.
        
        ng run app:ionic-cordova-build --platform=android exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.

I am not familiar with Angular but can you try the solution outlined here; just remove crypto and add all the packages that you need.

1 Like

Hey, I resolved the above mentioned issue by adding a custom webpack config file.

Now I am facing another error. I have installed the @walletconnect/web3-provider via npm but I am still getting this error.

Try re-installing @walletconnect/web3-provider. Are you using the latest Moralis SDK version?

No, I am using moralis version 1.4.0

Here is my project in angular https://github.com/shirazshakeel86/moralis-angular-walletconnect
The issue is connect button from wallet-connect does not detect installed meta-mask and does nothing.
I am using the latest SDK of both moralis and wallet connect.
(NOTE: make sure to add your server id and app id of moralis server in homepage.ts)
(NOTE: I have reinstalled meta-mask wallet on the android and it still doesn’t work)
screenshot attached

You can try using the latest version of 1.8.1. If it doesn’t resolve the issue, you can share a repo.

@alex https://github.com/alihaider1793/moralis-angularWalletconnect

you can clone this repo and see? I am using the latest version of 1.8.1

I tested it, seems to be fine on my end. WalletConnect prompt shows up and that error doesn’t show up.

Are these two the same project? I am prompted to connect (Open with dialog) MetaMask and Trust Wallet on a physical Android device (running on local server with npx ionic cap run android -l --external). Can you try with another device.

@alex does this project connects to metamask wallet through signing message on your end? Also, which device are you using?

No actually, the signing message prompt didn’t appear. I did not change the server details however, I can have another look later. An Android phone was used.

Well, thankyou @alex for your response, I managed to solve the issue by changing my project from cordova to capacitor.

 (running on local server with npx ionic cap run android -l --external).

This helped me.

1 Like

@alex I want to upload the nft image to moralis ipfs but, this doesn’t work. Neither it shows any error nor it shows any progress. I have used this code:

 this.image_data = ev.target.files[0];
 let file = new Moralis.File(this.image_data.name, this.image_data);
 await file.saveIPFS();

This saveIPFS() doesnot work.
I have a mainnet moralis server. Thank you

This ipfs works on browser but does nothing on android side. Also, i have authenticated the user and started Moralis server as addressed in various Moralis issues on the forum. @alex @cryptokid

Try using hardcoded values for everything when testing on Android. Have you tried another Android browser? Try a catch block with file.saveIPFS(), see if that gives anything.

await file.saveIPFS().catch((err) => alert(err));

@alex its working now. but, the issue comes with video file upload. I am using a base64 upload method. The issue is that when the file is uploaded on the server, the video is not being displayed nor played.

The issue is that when the file is uploaded on the server

Is this for IPFS? You can share the link, videos should be fine if they’re not too large. You can try using a different gateway e.g. https://gateway.moralisipfs.com/ipfs.

@alex This worked. Can you explain the difference in these gateways?