haveIBeenPwned.esm.js error in angular

[TYee71384]

I am creating a password meter component in angular 11, part of the requirements is to add the matcher-pwned library, which I did, but when I try to do ng serve, I am getting compiler errors

Error: ./node_modules/@zxcvbn-ts/matcher-pwned/dist/haveIBeenPwned.esm.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Work\sprapp\bostonsoftware.sprapp\node_modules\@zxcvbn-ts\matcher-pwned\dist'

any suggestions on how to resolve this? I tried searching on stack overflow but could not find a valid answer.
My application/ component worked fine before trying to add matcher-pwned package via npm

[MrWook]

Interesting 🤔
It should distinguish between node and a browser build and it should do it on only if you use zxcvbn-ts.
Are you triggering the matcher on serve?

[MrWook]

Hm i could reproduce this issue with ng new some-project-name and adding zxcvbn-ts.

I have no idea wtf angular is doing...

1. It should not execute this code piece
2. it is type checking the node_modules/zxcvbn-ts folder for some reason
3. It tries to compile the zxcvbn-ts src files directly from the node_modules_folder

I will test a few more thing, but i guess i need to make a separated packages for node and the brower 🤔

[TYee71384]

Any update on this? I am hoping to get this integrated into my code soon, since the rest of my component is done, just trying to add haveIbeenpwnd.
Thanks

[MrWook]

I found some relating issues like this one facebook/create-react-app#11756

It seems like webpack 5, which is used by angular 11, is handling node packages differently than before.
Previously webpack just throw some polifills in the frontend bundle even if it is inside an if statement.

It should work if you add this to your package.json

  "browser": {
    "crypto": false
  }

[TYee71384]

Thank you, I did try that, but for some reason, the app still had the same error. But in any case, yesterday I decided to look over haveibeenpwned's documentation and wrote a function for my meter component that will trigger the password range endpoint after focusing off the input field. I might revisit your functionality once we are ready to update to the latest version of angular

[MrWook]

Hm it should had worked. In my test project with angular it fixed the issue 🤔