Error: Can't resolve 'crypto' in Angular 12 with Webpack 5

[anarnoli]

I installed node-forge in application based on Angular 12 and Webpack 5. While building app throwing below error message and looking for help:

ERROR in ./node_modules/node-forge/lib/pbkdf2.js 19:11-28
Module not found: Error: Can't resolve 'crypto' in '/Users/ashishnarnoli/Code/Sample/node_modules/node-forge/lib'

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 }
 @ ./node_modules/node-forge/lib/index.js 21:0-19
 @ ./src/app/core/service/crypto.service.ts 3:0-33 14:24-47
 @ ./src/app/core/core.module.ts 1:0-57 16:66-79
 @ ./src/app/app.module.ts 4:0-48 17:128-138
 @ ./src/main.ts 14:0-45 17:69-78

[KorbinianKuhn]

As the error message explains: webpack 5 removed default browser polyfills. Install crypto-browserify and add it as a resolve.fallback to your webpack.config.

webpack.config.js

module.exports = {
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify')
      },
    },
  };

[kishanDesai500]

can you tell me where can i find webpack.config.

[KorbinianKuhn]

You have to modify your angular.json to tell your builders to use a custom config file.

I don't know if I'm allowed to post links here, but where are plenty tutorials explaining it in detail. So I recommend you just search for "angular custom webpack config" and follow a guide you like.

[BalloIbrahima]

If it's Twilio you use:

The Twilio module is not intended for use in client-side JavaScript, which is why it fails for your Angular application. Twilio uses your Account SID and your Auth Token, the use in the client side represents a risk; So the best is to use it on the server side and to use the API.

[Santoshah]

can you tell me where can i find webpack.config.

In order to use custom weback do the following.

1. Install @angular-builders/custom-webpack as a dev dependency
2. Create a file "custom-webpack.config.js" in the project root and add the following:
3. Add below code inside custom-webpack.config.js

module.exports = {
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify')
      },
    },
  };

4. Update angular.json to incorporate this custom webpack config into the build process

"server": {
     "builder": "@angular-builders/custom-webpack:server",
     "options": {
          "customWebpackConfig": {
               "path": "./custom-webpack.config.js",
               "replaceDuplicatePlugins": true
          },
          ...
     },
},

5. Done