Angular CLI与node-gyp报错：无法赋值给只读属性'cflags'

问题详情 #

依赖关系 #

@angular/cli依赖的node-gyp版本为10.0.1，依赖链如下：

npm ls node-gyp
apps-backoffice@1.0.0 /home/gabriel/Documents/IdeaProjects/orit.bp.app-leila
└─┬ @angular/cli@17.1.0
  └─┬ pacote@17.0.5
    └─┬ @npmcli/run-script@7.0.3
      └── node-gyp@10.0.1

报错信息 #

执行npm install时，node-zopfli-es包使用的node-gyp@7.1.0抛出异常：

npm ERR! code 7
npm ERR! path /home/gabriel/.../node_modules/node-zopfli-es
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.0
npm ERR! gyp info using node@20.11.0 | linux | x64
npm ERR! gyp info find Python using Python version 3.11.6 found at "/usr/bin/python3"
npm ERR! gyp ERR! UNCAUGHT EXCEPTION 
npm ERR! gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
npm ERR! gyp ERR! stack     at createConfigFile (/home/gabriel/.../node_modules/node-gyp/lib/configure.js:117:21)
npm ERR! gyp ERR! stack     at /home/gabriel/.../node_modules/node-gyp/lib/configure.js:84:9
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:191:23)
npm ERR! gyp ERR! System Linux 6.5.0-21-generic
npm ERR! gyp ERR! command "/home/gabriel/.nvm/versions/node/v20.11.0/bin/node" "/home/gabriel/.../node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /home/gabriel/.../node_modules/node-zopfli-es
npm ERR! gyp ERR! node -v v20.11.0
npm ERR! gyp ERR! node-gyp -v v7.1.0
npm ERR! gyp ERR! Node-gyp failed to build your package.
npm ERR! gyp ERR! Try to update npm and/or node-gyp and if it does not help file an issue with the package author.

复现步骤 #

使用Node v20.11.0执行npm install，安装以下package.json中的依赖：

{
  "name": "test",
  "version": "1.0.0",
  "engines": {
    "node": "^20"
  },
  "private": true,
  "dependencies": {
    "cheerio": "^1.0.0-rc.12",
    "@angular-devkit/architect": "~0.1702.1",
    "@angular-devkit/core": "~17.2.1",
    "@angular/animations": "~17.2.3",
    "@angular/cdk": "~17.2.1",
    "@angular/common": "~17.2.3",
    "@angular/compiler": "~17.2.3",
    "@angular/core": "~17.2.3",
    "@angular/forms": "~17.2.3",
    "@angular/material": "~17.2.1",
    "@angular/platform-browser": "~17.2.3",
    "@angular/platform-browser-dynamic": "~17.2.3",
    "@angular/router": "~17.2.3",
    "@elastic/ecs-winston-format": "~1.5.2",
    "bootstrap": "~4.5.3",
    "compression": "~1.7.4",
    "connect-redis": "^6.0.0",
    "cookie-parser": "~1.4.6",
    "d3": "^6.7.0",
    "express": "^4.18.2",
    "express-session": "^1.17.2",
    "file-saver": "^2.0.5",
    "google-libphonenumber": "^3.2.25",
    "got": "^11.8.2",
    "iban": "0.0.14",
    "ioredis": "^4.27.11",
    "jsonwebtoken": "~9.0.0",
    "lodash-es": "^4.17.21",
    "ngx-currency": "^17.0.0",
    "pluralize": "^8.0.0",
    "raw-loader": "^4.0.2",
    "rxjs": "^7.8.1",
    "shrink-ray-current": "^4.1.3",
    "simple-oauth2": "^3.4.0",
    "tslib": "^2.3.1",
    "uuid": "^8.3.2",
    "winston": "^3.3.3",
    "zone.js": "0.14.4"
  },
  "devDependencies": {
    "@dotenvx/dotenvx": "^0.19.1",
    "rimraf": "^3.0.2",
    "concurrently": "^8.2.2",
    "@angular/cli": "^17.2.1",
    "@angular/compiler-cli": "^17.2.3",
    "@angular-devkit/build-angular": "^17.2.1",
    "@angular-eslint/builder": "~17.2.1",
    "@angular-eslint/eslint-plugin": "~17.2.1",
    "@angular-eslint/eslint-plugin-template": "~17.2.1",
    "@angular-eslint/schematics": "~17.2.1",
    "@angular-eslint/template-parser": "~17.2.1",
    "@angular/language-service": "~17.2.3",
    "@types/compression": "^1.7.2",
    "@types/connect-redis": "0.0.17",
    "@types/cookie-parser": "^1.4.2",
    "@types/d3": "^6.7.8",
    "@types/express": "^4.17.21",
    "@types/express-session": "^1.17.10",
    "@types/file-saver": "^2.0.7",
    "@types/google-libphonenumber": "^7.4.30",
    "@types/iban": "0.0.35",
    "@types/ioredis": "^4.27.8",
    "@types/jasmine": "4.0.3",
    "@types/jasminewd2": "^2.0.13",
    "@types/jsonwebtoken": "^8.5.9",
    "@types/node": "18.19.19",
    "@types/pluralize": "0.0.33",
    "@types/prettier": "^2.4.1",
    "@types/simple-oauth2": "^2.5.8",
    "@types/supertest": "^2.0.16",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.62.0",
    "@typescript-eslint/parser": "5.62.0",
    "codelyzer": "^6.0.2",
    "eslint": "^8.50.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-prettier": "^5.1.3",
    "husky": "^7.0.4",
    "jasmine-core": "4.6.0",
    "karma": "6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "^2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "karma-mocha-reporter": "^2.2.5",
    "lint-staged": "^11.2.6",
    "ng-mocks": "^14.2.0",
    "nock": "^13.1.3",
    "prettier": "^3.0.3",
    "supertest": "^6.3.4",
    "ts-loader": "^9.5.1",
    "ts-node": "10.9.2",
    "typescript": "5.3.3",
    "webpack": "^5.90.3",
    "webpack-cli": "^4.10.0"
  }
}

环境信息 #

硬件信息

• 硬件型号：Dell Inc. Precision 5560
• 内存：64.0 GiB
• 处理器：11th Gen Intel® Core™ i7-11850H × 16
• 显卡：Intel® UHD Graphics (TGL GT1)
• 磁盘容量：1.0 TB

软件信息

• 固件版本：1.26.0
• 操作系统：Ubuntu 23.10
• 系统类型：64位
• GNOME版本：45.2
• 窗口系统：X11
• 内核版本：Linux 6.5.0-21-generic

解决方案 #

核心原因 #

node-gyp@7.x版本不兼容Node.js v20，而node-zopfli-es依赖的node-gyp版本过低，导致构建时抛出只读属性赋值错误。

具体解决步骤 #

1. 强制指定node-gyp版本
   在package.json中添加overrides字段，强制所有依赖使用兼容Node v20的node-gyp版本：

{
  "overrides": {
    "node-gyp": "^10.0.1"
  }
}

2. 清理缓存并重新安装
   执行以下命令清理npm缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

3. 升级node-zopfli-es
   检查node-zopfli-es是否有更新版本，新版本可能已修复依赖问题：

npm update node-zopfli-es

4. 全局升级node-gyp
   若上述方法无效，可全局升级node-gyp：

npm install -g node-gyp@latest

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