nodejs18 upgrade AEM buidl error

[ASP_Corp]

upgraded nodejs to 18.20.2 and npm to 10.8.1, angular 16. ours is an angular project and builds are failing with this error 

./node_modules/bcryptjs/dist/bcrypt.js:64:13-45 - Warning: Module not found: Error: Can't resolve 'crypto' in '/apps/jenkins-agent/agent/workspace/l-aem-rewrite_feature_rel_node18/ui.apps/node_modules/bcryptjs/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: { "crypto": require.resolve("crypto-browserify") }'
 - install 'crypto-browserify'
 If you don't want to include a polyfill, you can use an empty module like this:
 resolve.fallback: { "crypto": false }.

any help how to resolve this. so far my understanding is,

In AEM maven calls the POM.xml, which in turn calls the ng build command. when ng build runs it does linting first, then webpack 5 is used to create application bundles and copy over the assets to dist folder.  i can see that the linting is successful after that i see application bundles are generated, but the build fails at the "copy assets" over command. any help or insight into this?

The error i posted is a sample, i get around 250 errors, which goes like Error: Can't resolve 'stream', Error: Can't resolve 'url', Error: Can't resolve 'https'..etc..

[ASP_Corp]

also, from POM.xml looks like copyover is done by "maven-resources-plugin", so iam a bit confused, where does the webpack copy over ends and "maven-resources-plugin" starts?. when the build is completed, i see main.js, polyfill.js and runtime.js files are created, do we need them? they are articfacts from angular 12, we are now in angular 16, Moreover we do not check in those 3 js files, as i assume the application starts from main.ts file.

[ASP_Corp]

after few more hours on the internet found this. looks like from webpack 5 automatic polyfills are removed. you can look here https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed.

so, we have to manually override these polyfills. looks like this can be achieved by configuring tsconfig.js file or webpack.config.js file. I will update if i find anything intertesting. Meanwhile, can one had the same issues? and how they resolved it?