Moralis Integration in Ionic Angular (typescript)

alihaider1793 · December 28, 2022, 3:13am

Hi, hope you guys are doing well.
I am creating an app in ionic angular (typescript). This app will run on both android and iOS devices.
I am integrating Moralis SDK so that I can connect to Metamask wallet.

Here’s what I did so far and I am stuck

created a new ionic project
installed moralis package via npm
initialized Moralis with application id and server url
authenticate using the following code

this.user = await Moralis.authenticate({
signingMessage: “Log in using Moralis”,
})
.then(function (user) {
console.log(“logged in user:”, user);
console.log(user.get(“ethAddress”));
})
.catch(function (error) {
console.log(error);
});

I am getting an error which says Error: Non ethereum enabled browser
Can anyone help me out? Or tell me if there’s an existing boilerplate project for ionic?

alex · July 2, 2022, 1:41am

Error: Non ethereum enabled browser

This error happens when there is no injected wallet e.g. from a MetaMask (or similar) extension on desktop, or on mobile. For mobile, you can authenticate with WalletConnect.

alihaider1793 · July 5, 2022, 3:33pm

I installed the @walletconnect/web3-provider via npm and it is now giving an error of webpack. How do i resolve that error? Because in ionic(angular) we do not have a webpack config file by default.

alex · July 5, 2022, 8:31pm

Can you post the full error?

alihaider1793 · July 6, 2022, 7:34am

./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.

alex · July 6, 2022, 9:14pm

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.

alihaider1793 · July 6, 2022, 9:27pm

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.

alex · July 6, 2022, 9:50pm

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

alihaider1793 · July 7, 2022, 6:08am

No, I am using moralis version 1.4.0

shirazshakeel86 · July 7, 2022, 2:58pm

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

alex · July 7, 2022, 9:49pm

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

alihaider1793 · July 13, 2022, 5:53am

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

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

alex · July 14, 2022, 3:02am

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

alex · July 14, 2022, 3:21am

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.

shirazshakeel86 · July 14, 2022, 7:13am

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

alex · July 14, 2022, 9:00pm

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.

shirazshakeel86 · July 15, 2022, 12:36pm

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.

shirazshakeel86 · July 18, 2022, 9:14am

@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

shirazshakeel86 · July 18, 2022, 12:43pm

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

alex · July 19, 2022, 1:03am

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));