How to configure 'crypto-random-string' in Angular 12 without compilation errors?

Question

I am currently working on a migration project which I need to convert from Angular 6 to Angular 12. The updates went well, and ended up with a single library issue 'crypto-random-string'.

So I created a blank project to test the crypto-random-string feature like below.

imports:

import cryptorandomstring from 'crypto-random-string';

Component:

random = cryptorandomstring({ length: 43 });

For the first time I got below error,

Error: Module not found: Error: Can't resolve 'crypto' in '[root]\node_modules\crypto-random-string'

I went through the stackoverflow solutions and github issues and found some fixes for this.

Installed @angular-builders/custom-webpack
Configured @angular-builders/custom-webpack in angular.json

    "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
          ...
    "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          ...
    }

Configured the custom-webpack.config.js in my root directory. (as terminal's suggestion)

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

And installed the crypto-browserify package.

And after that I tried building the project and got the same type of errors for util and stream. So I repeated the steps above and finally ended up with the custom-webpack.config.js like below.

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve("crypto-browserify"),
      util: require.resolve("util/"),
      stream: require.resolve("stream-browserify"),
    },
  },
};

Now my build is success. I thought everything resolved until I run the ng serve command.

Now I am getting the compilation error when run with ng serve in the console saying,

util.js:109 Uncaught ReferenceError: process is not defined
    at Object.4655 (util.js:109)
    at __webpack_require__ (bootstrap:19)
    at Module.2032 (getOwnPropertyDescriptor.js:15)
    at __webpack_require__ (bootstrap:19)
    at Module.5041 (app-routing.module.ts:8)
    at __webpack_require__ (bootstrap:19)
    at Module.6747 (app.component.html:4)
    at __webpack_require__ (bootstrap:19)
    at Module.4431 (environment.ts:16)
    at __webpack_require__ (bootstrap:19)

Am I going in the correct way? How to resolve this in a standard way? Where did I make the mistake?

How to configure 'crypto-random-string' in Angular 12 without compilation errors?

0 Answers0