Angular项目打包遇digital envelope routines::unsupported问题求助

问题背景 #

• Angular 9项目，每年仅进行1-2次内容更新，近期切换到Windows 11系统后，使用nvm管理的Node.js 18.20.3执行打包时，出现ERR_OSSL_EVP_UNSUPPORTED错误
• 此前曾通过添加NODE_OPTIONS=--openssl-legacy-provider解决该问题，但本次已在package.json的build脚本中配置该命令，问题仍未解决

错误日志 #

10% building 4/5 modules 1 active D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\es5-polyfills.jsnode:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:417:16)
    at D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:452:10)
    at D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:323:13)
    at D:\wamp64\www\sites\ecarte\node_modules\loader-runner\lib\LoaderRunner.js:367:11)
    at D:\wamp64\www\sites\ecarte\node_modules\loader-runner\lib\LoaderRunner.js:203:19)
    at VirtualFileSystemDecorator.readFile (D:\wamp64\www\sites\ecarte\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:46:13)
    at processResource (D:\wamp64\www\sites\ecarte\node_modules\loader-runner\lib\LoaderRunner.js:202:11)
    at iteratePitchingLoaders (D:\wamp64\www\sites\ecarte\node_modules\loader-runner\lib\LoaderRunner.js:158:10)
    at runLoaders (D:\wamp64\www\sites\ecarte\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at NormalModule.doBuild (D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:295:3)
    at NormalModule.build (D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\NormalModule.js:446:15)
    at Compilation.buildModule (D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:739:10)
    at D:\wamp64\www\sites\ecarte\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:981:14 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

当前package.json配置 #

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lrf": "ng serve --aot --live-reload=false",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && ng build ",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "moment": "^2.26.0",
    "ngx-google-analytics": "^9.0.0",
    "ngx-socket-io": "^3.0.1",
    "ngx-swiper-wrapper": "^9.0.1",
    "ngx-useful-swiper": "^9.0.3",
    "rxjs": "~6.5.4",
    "swiper": "^5.4.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/swiper": "^5.3.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

可行解决方案 #

方案1：修正Windows命令行的环境变量传递 #

Windows默认CMD中，直接拼接set命令可能导致环境变量未正确传递给ng命令，修改build脚本为：

"build": "cmd /c \"set NODE_OPTIONS=--openssl-legacy-provider && ng build\""

或者手动分步执行：

set NODE_OPTIONS=--openssl-legacy-provider
npm run build

方案2：切换到Angular 9兼容的Node.js版本 #

Angular 9官方推荐Node.js 10.x或12.x LTS版本，Node.js 18与项目依赖的低版本webpack兼容性差：

1. 安装兼容版本：nvm install 12.22.12
2. 切换版本：nvm use 12.22.12
3. 重新执行打包：npm run build

方案3：适配PowerShell的环境变量设置 #

如果使用PowerShell执行命令，set命令不生效，修改build脚本为：

"build": "$env:NODE_OPTIONS='--openssl-legacy-provider'; ng build"

或者手动执行：

$env:NODE_OPTIONS='--openssl-legacy-provider'
npm run build

方案4：升级webpack相关依赖（谨慎操作） #

若不想切换Node版本，可尝试升级@angular-devkit/build-angular到兼容Node.js 18的同大版本补丁：

npm install @angular-devkit/build-angular@~0.901.15 --save-dev

注意：升级后可能出现依赖冲突，建议先备份package.json和node_modules目录

内容的提问来源于stack exchange，提问作者Friky