JHipster 7.0.1项目PrimeNG与Angular Material依赖兼容性问题求助

我用JHipster 7.0.1生成了项目，但内置的PrimeNG和Angular Material依赖出现问题，以下是我的package.json配置：

"dependencies": {
    "-": "0.0.1",
    "@angular/animations": "^14.1.0",
    "@angular/common": "11.2.7",
    "@angular/compiler": "11.2.7",
    "@angular/core": "11.2.7",
    "@angular/forms": "11.2.7",
    "@angular/localize": "11.2.7",
    "@angular/material": "^14.2.2",
    "@angular/platform-browser": "11.2.7",
    "@angular/platform-browser-dynamic": "11.2.7",
    "@angular/router": "11.2.7",
    "@fortawesome/angular-fontawesome": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "1.2.35",
    "@fortawesome/free-solid-svg-icons": "5.15.3",
    "@ng-bootstrap/ng-bootstrap": "9.1.0",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "bootstrap": "4.6.0",
    "bootswatch": "4.6.0",
    "dayjs": "1.10.4",
    "ngx-infinite-scroll": "10.0.1",
    "ngx-webstorage": "7.0.1",
    "primeicons": "^6.0.1",
    "primeng": "^15.1.0",
    "rxjs": "6.6.7",
    "save": "^2.9.0",
    "swagger-ui-dist": "3.46.0",
    "tslib": "2.1.0",
    "zone.js": "0.11.3"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.1.1",
    "@angular-builders/jest": "11.1.1",
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular/cli": "11.2.6",
    "@angular/compiler-cli": "11.2.7",
    "@angular/service-worker": "11.2.7",
    "@types/jest": "26.0.22",
    "@types/node": "14.14.37",
    "@typescript-eslint/eslint-plugin": "4.20.0",
    "@typescript-eslint/parser": "4.20.0",
    "browser-sync": "^2.24.1",
    "browser-sync-webpack-plugin": "2.3.0",
    "concurrently": "6.0.0",
    "copy-webpack-plugin": "6.4.1",
    "eslint": "7.23.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-webpack-plugin": "2.5.3",
    "friendly-errors-webpack-plugin": "1.7.0",
    "generator-jhipster": "7.0.1",
    "husky": "4.3.8",
    "jest": "26.6.3",
    "jest-date-mock": "1.0.8",
    "jest-junit": "12.0.0",
    "jest-sonar-reporter": "2.0.0",
    "lint-staged": "10.5.4",
    "merge-jsons-webpack-plugin": "1.0.21",
    "prettier": "2.2.1",
    "prettier-plugin-java": "1.0.2",
    "prettier-plugin-packagejson": "2.2.10",
    "rimraf": "3.0.2",
    "simple-progress-webpack-plugin": "1.1.2",
    "typescript": "4.1.5",
    "wait-on": "5.3.0",
    "webpack": "4.46.0",
    "webpack-bundle-analyzer": "4.4.0",
    "webpack-merge": "5.7.3",
    "webpack-notifier": "1.13.0"
  },
  "engines": {
    "node": ">=14.16.0"
  },
  "cacheDirectories": [
    "node_modules"
  ],
  "jestSonar": {
    "reportPath": "target/test-results/jest",
    "reportFile": "TESTS-results-sonar.xml"
  }

我认为问题源于集成依赖的版本兼容性，当前Angular核心版本为11.2.7，但@angular/animations、@angular Material、PrimeNG等依赖版本过高，与Angular版本不匹配。请问问题具体出在哪里？我该如何解决？

问题具体分析 #

• Angular核心包版本不一致：@angular/animations用了^14.1.0，而其他Angular核心包都是11.2.7，Angular要求所有核心包必须同版本，否则会出现编译错误或运行时模块不匹配问题。
• Angular Material版本不兼容：Angular Material的版本必须与Angular核心版本严格对应，Angular 11只能搭配11.x版本的Material，当前用的14.2.2版本完全不兼容。
• PrimeNG版本差距过大：PrimeNG 15要求Angular 14及以上版本，和当前Angular 11完全不兼容，会导致组件无法加载、依赖缺失等问题，配套的primeicons版本也过高。
• 无效依赖项："-": "0.0.1"是错误的配置，属于无效依赖，会干扰npm的依赖解析。

解决步骤 #

1. 修正Angular核心包版本 #

将@angular/animations改为和其他核心包一致的11.2.7，去掉版本号前的^，确保版本锁定。

2. 匹配Angular Material版本 #

把@angular/material改为11.2.13（Angular 11对应的最新稳定Material版本），同样锁定版本。

3. 降级PrimeNG及PrimeIcons #

PrimeNG 11.x对应Angular 11，所以将primeng改为11.4.5，primeicons改为配套的4.1.0。

4. 删除无效依赖 #

移除"-": "0.0.1"这个错误的依赖项。

5. 重新安装依赖 #

执行以下命令清理现有依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

修改后的dependencies示例 #

"dependencies": {
    "@angular/animations": "11.2.7",
    "@angular/common": "11.2.7",
    "@angular/compiler": "11.2.7",
    "@angular/core": "11.2.7",
    "@angular/forms": "11.2.7",
    "@angular/localize": "11.2.7",
    "@angular/material": "11.2.13",
    "@angular/platform-browser": "11.2.7",
    "@angular/platform-browser-dynamic": "11.2.7",
    "@angular/router": "11.2.7",
    "@fortawesome/angular-fontawesome": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "1.2.35",
    "@fortawesome/free-solid-svg-icons": "5.15.3",
    "@ng-bootstrap/ng-bootstrap": "9.1.0",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "bootstrap": "4.6.0",
    "bootswatch": "4.6.0",
    "dayjs": "1.10.4",
    "ngx-infinite-scroll": "10.0.1",
    "ngx-webstorage": "7.0.1",
    "primeicons": "4.1.0",
    "primeng": "11.4.5",
    "rxjs": "6.6.7",
    "save": "^2.9.0",
    "swagger-ui-dist": "3.46.0",
    "tslib": "2.1.0",
    "zone.js": "0.11.3"
  }

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