Moralis npm package installation does not work 100%

Moralis General
#1

Hi, I have installed moralis to my angular project (npm i moralis) and imported moralis into the component just like it is done in the demo app " https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-angular-app ". the demo app compile with a warning and still run:

“Warning: C:\Development\demo-apps-main\moralis-angular-app\src\app\app.component.ts depends on ‘moralis’. CommonJS or AMD dependencies can cause optimization bailouts.”

In my angular app I get multiple build errors of dependencies that could not be found, but it is in the node_modules folder.

below is the list of errors and warnings I get in my project:

  1. WARNING in ./node_modules/crypto-js/core.js
    Module not found: Error: Can’t resolve ‘crypto’ in ‘C:\Development\moralis-test\node_modules\crypto-js’

  2. WARNING in C:\Development\moralis-test\src\app\app.component.ts depends on ‘moralis’. CommonJS or AMD dependencies can cause optimization bailouts.

  3. WARNING in C:\Development\moralis-test\node_modules@ethersproject\signing-key\lib.esm\elliptic.js depends on ‘hash.js’. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

  4. ERROR in ./node_modules/eth-lib/lib/bytes.js
    Module not found: Error: Can’t resolve ‘crypto’ in ‘C:\Development\moralis-test\node_modules\eth-lib\lib’

  5. ERROR in ./node_modules/web3-eth-accounts/lib/index.js
    Module not found: Error: Can’t resolve ‘crypto’ in ‘C:\Development\moralis-test\node_modules\web3-eth-accounts\lib’

  6. ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
    Module not found: Error: Can’t resolve ‘crypto’ in ‘C:\Development\moralis-test\node_modules\web3-eth-accounts\node_modules\eth-lib\lib’

  7. ERROR in ./node_modules/web3-providers-http/lib/index.js
    Module not found: Error: Can’t resolve ‘http’ in ‘C:\Development\moralis-test\node_modules\web3-providers-http\lib’

  8. ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
    Module not found: Error: Can’t resolve ‘http’ in ‘C:\Development\moralis-test\node_modules\xhr2-cookies\dist’

  9. ERROR in ./node_modules/web3-providers-http/lib/index.js
    Module not found: Error: Can’t resolve ‘https’ in ‘C:\Development\moralis-test\node_modules\web3-providers-http\lib’

  10. ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
    Module not found: Error: Can’t resolve ‘https’ in ‘C:\Development\moralis-test\node_modules\xhr2-cookies\dist’

  11. ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
    Module not found: Error: Can’t resolve ‘os’ in ‘C:\Development\moralis-test\node_modules\xhr2-cookies\dist’

  12. ERROR in ./node_modules/cipher-base/index.js
    Module not found: Error: Can’t resolve ‘stream’ in ‘C:\Development\moralis-test\node_modules\cipher-base’

  13. ERROR in ./node_modules/keccak/lib/api/shake.js
    Module not found: Error: Can’t resolve ‘stream’ in ‘C:\Development\moralis-test\node_modules\keccak\lib\api’

  14. ERROR in ./node_modules/keccak/lib/api/keccak.js
    Module not found: Error: Can’t resolve ‘stream’ in ‘C:\Development\moralis-test\node_modules\keccak\lib\api’

1 Like
#2

For more information :smile:

Project structure:

image
image258×839 19 KB

#3

app.component.ts

image
image622×845 31 KB

#4

copy the patch.js file from the angular demo project and add “postinstall”: “node patch.js” to your package.json scripts. This will solve the issue

1 Like
#5

Thank you, I will give it a go

#6

is it working for you?

#7

Yes my project is working now

#8

I can’t find the patch.js file. Could you please post a link to it?

#9

Hi @newsha this is related to an older way of building angular apps with Moralis and the link in my original post now points to the new boilerplate project

so in your projects main directory you would create the patch.js file in your angular project root directory like I did in the below screenshot:

image
image1214×627 19.8 KB

contents of the file is:

// Angular >= 11 
const fs = require('fs')
const f = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js'

fs.readFile(f, 'utf8', function(err, data) {
  if (err) {
    return console.log(err)
  }
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true, fs: "empty"}')

  fs.writeFile(f, result, 'utf8', function(err) {
    if (err) return console.log(err)
  })
});
// ----

I have recently started an Angular 12 project and found that is is a lot easier to follow the instructions of the new Moralis project structure that can be found here:
https://github.com/MoralisWeb3/demo-apps/tree/main/moralis-angular-app

#10

@SnappyBow513 hope this finds you well. I have tried every possible way to connect metamask through moralis in ionic (angular) but it doesn’t work. If you provide me with a demo project only used to connect user to metamask in android ios, it will be very helpful.

#11

@SnappyBow513 is the github repository private? I can not access it.

#12

Good day, @shirazshakeel86 sorry for replying now. I was very busy and didn’t get time to look at the forum. In regards to Angular + Ionic I can get the authentication to work on a desktop but not on mobile. I am also looking for a solution for mobile

#13

@alihaider1793 Sorry I am not in control of that repo, the repo is managed by the Moralis team (Ivan and colleague).

#14

I believe the user found a workaround.

#15

Are you integrating your ionic app with cordova?

#16

I am using capacitor. As far as I understand cordova is replaced with capacitor,
I think my Moralis package is outdated.

#17

i had issues with cordova, but once I switched to capacitor all worked just fine

1 Like