webpack 5 angular polyfill for node.js crypto-js

Question

I have basic question about webpack 5 configuration since I have zero experience with it. I would like to create most simple Angular application that uses node.js module crypto-js and SHA256.

Before webpack 5 it was quite simple. You didn't have to worry about webpack, it was somewhere in behind.

In command prompt I did : ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> write simple test code with imported SHA256 -> build it and -> it worked!

Now I get message:

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 }

I have to install this module and include this polyfill inside config file. The question is howto write most simple webpack.config.js, where to put it and what to include in it besides these lines?

BR

Answer 1

I ran into this problem after upgrading to Angular 12, so after searching I ended up doing the following:

In tsconfig.json I added:

    {
      "compilerOptions": {
        "paths":{
          "crypto":["node_modules/crypto-js"]
        }
     }
    }

And in angular.json I added:

     {
    "architect": {
            "build": {
              "options": {
                "allowedCommonJsDependencies": ["crypto"], // note that this is the key of --> "crypto":["node_modules/crypto-js"]"
              }
            }
        }
    }

And the warnings are gone. I hope this will help you out.

Answer 2

I had the same issue, this is the working solution i found on git hub. https://github.com/ChainSafe/web3.js/issues/4070

run in your project directory:

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

tsconfig.json Add this in:"compilerOptions": { [...] }

"paths" : {
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"],
      "assert": ["./node_modules/assert"],
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify"],
    }

Answer 3

The below steps will help resolve this problem

• Install the browserify ports for crypto and stream

  npm install crypto-browserify stream-browserify
  

• In tsconfig.json under compiler options, add the below lines. Since webpack is not auto-exporting the polyfills, these specify a set of entries that re-map imports to additional lookup locations.

  "paths":{
  "crypto":["node_modules/crypto-browserify"],
  "stream":["node_modules/stream-browserify"]
  }
  

• In angular.json under architect->build->options add the below line which says the CommonJS packages crypto should be used without a build time warning.

  "allowedCommonJsDependencies": ["crypto"]
  

^{Note : Read what browserify does.}

Answer 4

Sadly, the webpack configuration is hidden by Angular that only give you access to some options exposed by the AngularCli.

However you can use the package @angular-builders/custom-webpack that works very well. It's easy to use and you can substitute some webpack options without breaking all the configuration provided by Angular.

So, in your case, you could add a crypto-browserify as fallback for "crypto". In that case your webpack extra config file would look like :

{ resolve: { fallback: { crypto: "./node_modules/crypto-browserify" } } }