Deploying Angular applications is typically a smooth process, but encountering errors like "0308010C: digital envelope routines::unsupported" can be a source of frustration. In this blog post, we'll delve into the causes of this error and provide comprehensive solutions to address it, ensuring a seamless deployment of your Angular app with Node.js 17+.

This is the whole error,

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/vercel/path0/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/vercel/path0/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/vercel/path0/node_modules/webpack/lib/NormalModule.js:471:10)
    at /vercel/path0/node_modules/webpack/lib/NormalModule.js:503:5
    at /vercel/path0/node_modules/webpack/lib/NormalModule.js:358:12
    at /vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/vercel/path0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /vercel/path0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /vercel/path0/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1

Causes of the "0308010C: Digital Envelope Routines::Unsupported" Error

The error message you're facing originates from changes introduced in Node.js 17 and OpenSSL3, affecting the initialization context of the md family, including md4. This discrepancy may lead to the manifestation of the "0308010C: Digital Envelope Routines::Unsupported" error.

Also, Refer to the OpenSSL 3.0 upgrade guide for further insights.

Solutions to Resolve the Error

Solution 1: Upgrade NPM Packages

To address the error, consider upgrading Node.js packages causing the issue to the latest version. Run the following commands in your terminal:

npm audit fix

or, if needed:

npm audit fix --force

This will automatically identify and fix packages using outdated OpenSSL versions. Be cautious with the --force option, as it may introduce breaking changes.

Solution 2: Update Webpack

Upgrade Webpack to version 5 (specifically v5.61.0) using the following commands:

npm i webpack@latest

or, for Yarn users:

yarn add webpack@latest

Alternatively, update your webpack.config.js with the provided code snippet.

const path = require("path");
const crypto = require("crypto");
const crypto_orig_createHash = crypto.createHash;
crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "app.js",
    hashFunction: "sha256",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 9000
  },
  mode: "development"
};

Recommended Solution: Use --openssl-legacy-provider Option

Option 1. Set NODE_OPTIONS Environment Variable:

• Unix-like (Linux, macOS, Git bash, etc.):
  

   export NODE_OPTIONS=--openssl-legacy-provider
  

• Windows Command Prompt:
  

   set NODE_OPTIONS=--openssl-legacy-provider
  

• PowerShell:
  

   $env:NODE_OPTIONS = "--openssl-legacy-provider"
  

• Additionally, integrate these into scripts in your package.json:
  

   "scripts": {
     "start": "export NODE_OPTIONS=--openssl-legacy-provider && ng serve" // use set instead of export in case of windows machine
   }
  

• Alternatively, install cross-env globally (npm install --global cross-env) and use it in your scripts:
  

   "scripts": {
     "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider && ng serve"
   }
  

Set SSL Legacy Option via NPM:(Best Solution)

• For a simpler approach through NPM, set the SSL legacy option in the .npmrc file.

  • Example for NodeJS v18 with npm v9:

    • Add or edit .npmrc file in your project folder and include the option:

     node-options="--openssl-legacy-provider"
    

• Advantages:

  • This setting can be managed per project.
  • The .npmrc file in the project will serve as a reminder for necessary updates.
  • If the issue occurs in other projects on the server, the error will be addressed consistently.

Conclusion

By following these solutions, you can overcome the "0308010C: digital envelope routines::unsupported" error and successfully deploy your Angular app with Node.js 17+. Ensure your Node.js version is LTS, upgrade relevant packages, and make necessary adjustments to your Webpack configuration. Happy coding!