Angular 10中npm install及新增包失败问题求助

问题概述 #

• 环境：Angular 10（对应版本截图已提供）、Node.js v16.18.0
• 核心问题：执行npm i dotenv安装dotenv时触发依赖冲突错误；手动在package.json中添加依赖后问题未解决，且安装其他第三方包时也会出现相同冲突
• 已尝试无效操作：移除相关冲突包、删除node_modules文件夹后执行常规npm install，仍返回类似错误，导致应用无法启动运行

项目package.json配置 #

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/forms": "~10.0.6",
    "@angular/localize": "^10.0.14",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/router": "~10.0.6",
    "@auth0/angular-jwt": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^4.0.4",
    "@ng-select/ng-select": "^5.0.0",
    "@types/jquery": "^3.5.14",
    "bootstrap": "^5.1.3",
    "file-saver": "^2.0.5",
    "highcharts": "^10.1.0",
    "highcharts-angular": "^3.0.0",
    "intl-tel-input": "^17.0.16",
    "jquery": "^3.6.0",
    "ng-intl-tel-input": "^2.0.0",
    "ng2-tel-input": "^2.3.0",
    "ngx-pagination": "^5.1.1",
    "ngx-toastr": "^11.3.3",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "sass": "^1.52.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

针对性解决步骤 #

1. 修复Node.js版本不匹配问题 #

Angular 10官方兼容的Node.js版本为12.x或14.x，当前使用的v16.18.0版本过高，这是引发依赖冲突的核心原因之一：

• 使用nvm（Node版本管理器）切换到兼容版本，比如Node.js 14.21.3：

  nvm install 14.21.3
  nvm use 14.21.3
  

• 若未安装nvm，可直接从Node.js官网下载对应版本安装包覆盖安装

2. 清理npm缓存并重新安装依赖 #

# 删除node_modules和package-lock.json
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装基础依赖
npm install

3. 安装dotenv时指定兼容版本并使用legacy peer deps参数 #

Angular 10项目建议安装dotenv v10.x版本（更高版本可能依赖新Node API），同时使用--legacy-peer-deps参数绕过npm v7+的严格peer依赖检查：

npm install dotenv@10.0.0 --legacy-peer-deps

4. 排查其他第三方包的版本兼容性 #

检查package.json中部分高版本依赖（比如bootstrap@5.1.3、highcharts@10.1.0）是否与Angular 10兼容，若存在冲突：

• 降级到对应兼容版本，例如bootstrap可降级到v4.x（@ng-bootstrap/ng-bootstrap@4.0.4兼容bootstrap 4）
• 安装时同样添加--legacy-peer-deps参数

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