更新chartist后Angular项目启动失败，依赖冲突如何解决？

更新chartist依赖后，Angular项目无法正常启动，出现两类错误：

1. ng serve时的ES模块目录导入错误 #

An unhandled exception occurred: Directory import 'C:\Users\Adam\Desktop\Dashboard admin\material-dashboard-angular2-master\node_modules\@angular-devkit\build-angular\src\dev-server' is not supported resolving ES modules imported from C:\Users\Adam\Desktop\Dashboard admin\material-dashboard-angular2-master\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
Did you mean to import C:/Users/Adam/Desktop/Dashboard admin/material-dashboard-angular2-master/node_modules/@angular-devkit/build-angular/src/dev-server/index.js?
See "C:\Users\Adam\AppData\Local\Temp\ng-6Ov2p1\angular-errors.log" for further details.

2. npm install时的依赖冲突错误 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-devkit/build-angular@0.1002.1
npm ERR! Found: @angular/compiler-cli@14.3.0
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^14.2.0" from the root project
npm ERR!   peer @angular/compiler-cli@"14.3.0" from @angular/localize@14.3.0
npm ERR!   node_modules/@angular/localize
npm ERR!     @angular/localize@"^14.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.1
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^0.1002.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@10.2.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.1
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^0.1002.1" 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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Adam\AppData\Local\npm-cache\_logs\2023-06-09T12_05_16_553Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adam\AppData\Local\npm-cache\_logs\2023-06-09T12_05_16_553Z-debug-0.log

当前项目package.json内容：

{"name": "material-dashboard-angular","version": "2.8.0","license": "MIT","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e","install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"},"engines": {"node": "6.11.1","npm": "3.10.9"},"private": true,"dependencies": {"@angular/animations": "^14.2.0","@angular/cdk": "^14.2.0","@angular/common": "^14.2.0","@angular/compiler": "^14.2.0","@angular/core": "^14.2.0","@angular/elements": "^14.2.0","@angular/forms": "^14.2.0","@angular/localize": "^14.2.0","@angular/material": "^14.2.0","@angular/platform-browser": "^14.2.0","@angular/platform-browser-dynamic": "^14.2.0","@angular/router": "^14.2.0","ajv": "8.11.0","arrive": "2.4.1","bootstrap": "4.6.1","bootstrap-material-design": "4.1.3","bootstrap-notify": "3.1.3","chartist": "^0.11.4","chartist-plugin-tooltip": "^0.0.11","classlist.js": "1.1.20150312","eslint": "^8.11.0","express": "4.17.3","googleapis": "99.0.0","hammerjs": "2.0.8","jquery": "3.6.0","moment": "^2.29.4","perfect-scrollbar": "1.5.5","popper.js": "1.16.1","rxjs": "~7.5.0","tslib": "^2.3.0","web-animations-js": "2.3.2","zone.js": "~0.11.4"},"devDependencies": {"@angular-devkit/build-angular": "^0.1002.1","@angular/cli": "~14.2.7","@angular/compiler-cli": "^14.2.0","@angular/language-service": "14.2.0","@types/bootstrap": "4.5.0","@types/chartist": "0.11.1","@types/google.maps": "3.47.4","@types/jasmine": "~4.0.0","@types/jasminewd2": "~2.0.10","@types/jquery": "3.5.6","@types/node": "^17.0.21","codelyzer": "^0.0.28","jasmine-core": "~4.4.0","jasmine-spec-reporter": "~7.0.0","karma": "~6.4.0","karma-chrome-launcher": "~3.1.0","karma-coverage": "~2.2.0","karma-coverage-istanbul-reporter": "~3.0.3","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.0.0","protractor": "^3.3.0","sass": "1.32.13","ts-node": "~10.9.1","typescript": "~4.7.2"}}

核心问题是**@angular-devkit/build-angular版本与当前Angular 14版本不兼容**：你当前使用的@angular-devkit/build-angular@0.1002.1是Angular 10对应的版本，而项目依赖的Angular核心包都是14.x版本，导致依赖冲突和模块导入错误。

按以下步骤修复：

1. 更新@angular-devkit/build-angular到匹配Angular 14的版本
   修改package.json中devDependencies里的@angular-devkit/build-angular版本，改为与@angular/cli一致的14.x版本：

   "@angular-devkit/build-angular": "~14.2.7"
   

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

   rm -rf node_modules package-lock.json
   npm install
   

   Windows环境可改用：

   rmdir /s node_modules && del package-lock.json && npm install
   

3. 验证项目启动
   运行ng serve，确认项目正常启动。

额外注意：

• 你的engines配置里Node和npm版本过低（Node 6.11.1、npm 3.10.9），Angular 14要求Node 14.15+或16.x，建议更新Node.js到对应版本，避免后续出现其他兼容性问题。
• chartist更新本身不会导致这类问题，是依赖冲突引发的连锁反应，修复上述核心依赖后即可正常使用更新后的chartist。

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