Moralis npm package installation does not work 100%

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\[email protected]\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

For more information :smile:

Project structure:

app.component.ts

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

Thank you, I will give it a go

is it working for you?

Yes my project is working now

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

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:

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