从Angular 15升级到16的npm配置依赖冲突解决求助
2026-7-18
Angular 15升级至16的依赖冲突解决
原Angular 15 package.json配置
{ "name": "name", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "lint": "ng lint" }, "private": true, "dependencies": { "@angular/animations": "^15.0.4", "@angular/common": "~15.0.4", "@angular/compiler": "~15.0.4", "@angular/core": "~15.0.4", "@angular/forms": "~15.0.4", "@angular/localize": "~15.0.4", "@angular/platform-browser": "~15.0.4", "@angular/platform-browser-dynamic": "~15.0.4", "@angular/router": "~15.0.4", "@ng-bootstrap/ng-bootstrap": "^14.0.0", "@popperjs/core": "^2.11.6", "bootstrap": "^5.2.0", "ngx-spinner": "^15.0.1", "ngx-toastr": "^15.0.0", "rxjs": "~7.5.5", "tslib": "^2.4.0", "zone.js": "~0.11.5" }, "devDependencies": { "@angular-devkit/build-angular": "^15.0.5", "@angular-eslint/builder": "15.1.0", "@angular-eslint/eslint-plugin": "15.1.0", "@angular-eslint/eslint-plugin-template": "15.1.0", "@angular-eslint/schematics": "^15.1.0", "@angular-eslint/template-parser": "15.1.0", "@angular/cli": "^15.0.5", "@angular/compiler-cli": "~15.0.4", "@types/jasmine": "~4.0.3", "@types/node": "^17.0.30", "@typescript-eslint/eslint-plugin": "^5.43.0", "@typescript-eslint/parser": "^5.43.0", "eslint": "^8.28.0", "eslint-plugin-jsdoc": "^39.2.9", "jasmine-core": "~4.1.0", "karma": "~6.3.19", "karma-chrome-launcher": "~3.1.1", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.0.0", "karma-jasmine-html-reporter": "~1.7.0", "karma-junit-reporter": "^2.0.1", "typescript": "~4.8.4" } }
修改后的Angular 16配置（存在版本不一致问题）
{ "name": "name", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "test-ci": "ng test --watch=false --browsers=ChromeHeadless", "lint": "ng lint" }, "private": true, "dependencies": { "@angular/animations": "^15.0.4", "@angular/common": "16.0.0", "@angular/compiler": "^16.0.0", "@angular/core": "16.0.0", "@angular/forms": "~15.0.4", "@angular/localize": "~15.0.4", "@angular/platform-browser": "~15.0.4", "@angular/platform-browser-dynamic": "~15.0.4", "@angular/router": "~15.0.4", "@ng-bootstrap/ng-bootstrap": "^14.0.0", "@popperjs/core": "^2.11.6", "bootstrap": "^5.2.0", "ngx-spinner": "^15.0.1", "ngx-toastr": "^15.0.0", "rxjs": "~7.5.5", "tslib": "^2.4.0", "zone.js": "~0.13.1" }, "devDependencies": { "@angular-devkit/build-angular": "16.0.0", "@angular-eslint/builder": "16.0.0", "@angular-eslint/eslint-plugin": "16.0.0", "@angular-eslint/eslint-plugin-template": "16.0.0", "@angular-eslint/schematics": "^16.0.0", "@angular-eslint/template-parser": "16.0.0", "@angular/cli": "16.0.0", "@angular/compiler-cli": "16.0.0", "@types/jasmine": "~4.0.3", "@types/node": "^18.0.30", "@typescript-eslint/eslint-plugin": "^5.43.0", "@typescript-eslint/parser": "^5.43.0", "eslint": "^8.28.0", "eslint-plugin-jsdoc": "^39.2.9", "jasmine-core": "~4.1.0", "karma": "~6.3.19", "karma-chrome-launcher": "~3.1.1", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.0.0", "karma-jasmine-html-reporter": "~1.7.0", "karma-junit-reporter": "^2.0.1", "typescript": "~4.9.4" } }
依赖解析错误信息
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: name@0.0.0 npm ERR! Found: @angular-devkit/build-angular@15.0.5 npm ERR! node_modules/@angular-devkit/build-angular npm ERR! dev @angular-devkit/build-angular@"16.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! dev @angular-devkit/build-angular@"16.0.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: @angular/compiler-cli@16.0.0 npm ERR! node_modules/@angular/compiler-cli npm ERR! peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.0.0 npm ERR! node_modules/@angular-devkit/build-angular npm ERR! dev @angular-devkit/build-angular@"16.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
解决方法
核心问题
新配置中Angular官方依赖版本不统一，部分包（如animations、forms、localize等）仍停留在15.x版本，与已升级到16.x的core、common等包产生peer依赖冲突；同时第三方依赖也未升级到支持Angular 16的版本。
正确的package.json配置
将所有Angular官方依赖统一到16.0.0，并升级第三方依赖至兼容Angular 16的版本：
{ "name": "name", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "test-ci": "ng test --watch=false --browsers=ChromeHeadless", "lint": "ng lint", "watch": "ng build --watch --configuration development" }, "private": true, "dependencies": { "@angular/animations": "^16.0.0", "@angular/common": "^16.0.0", "@angular/compiler": "^16.0.0", "@angular/core": "^16.0.0", "@angular/forms": "^16.0.0", "@angular/localize": "^16.0.0", "@angular/platform-browser": "^16.0.0", "@angular/platform-browser-dynamic": "^16.0.0", "@angular/router": "^16.0.0", "@ng-bootstrap/ng-bootstrap": "^15.0.0", "@popperjs/core": "^2.11.6", "bootstrap": "^5.2.0", "ngx-spinner": "^16.0.2", "ngx-toastr": "^16.0.2", "rxjs": "~7.8.0", "tslib": "^2.4.0", "zone.js": "~0.13.1" }, "devDependencies": { "@angular-devkit/build-angular": "^16.0.0", "@angular-eslint/builder": "^16.0.0", "@angular-eslint/eslint-plugin": "^16.0.0", "@angular-eslint/eslint-plugin-template": "^16.0.0", "@angular-eslint/schematics": "^16.0.0", "@angular-eslint/template-parser": "^16.0.0", "@angular/cli": "^16.0.0", "@angular/compiler-cli": "^16.0.0", "@types/jasmine": "~4.3.0", "@types/node": "^18.15.0", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", "eslint": "^8.39.0", "eslint-plugin-jsdoc": "^43.0.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "karma-junit-reporter": "^2.0.1", "typescript": "~4.9.4" } }
后续步骤
- 删除项目根目录下的
node_modules文件夹和package-lock.json文件 - 执行
npm install命令重新安装依赖 - 安装完成后，运行
ng serve或ng build验证项目是否正常工作
内容的提问来源于stack exchange，提问作者Jojje
相关产品推荐
相关产品推荐
