Angular执行ng serve时构建报错，同版本成员可正常运行的排查方案

我们执行ng serve启动Angular应用时，应用无法编译并出现如图所示的错误，但团队其他成员使用相同版本的Angular CLI却能正常运行该应用，请问可能的原因及解决方案是什么？

Package.json 文件 #

{  
  "name": "angular-p",  
  "version": "0.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve ",  
  },  
  "private": true,  
  "dependencies": {    
    "@angular/animations": "^16.2.12",    
    "@angular/cdk": "^7.0.0",    
    "@angular/common": "^16.2.12",    
    "@angular/compiler": "^16.2.12",    
    "@angular/core": "^16.2.12",    
    "@angular/forms": "^16.2.12",    
    "@angular/localize": "^16.2.12",    
    "@angular/material": "^7.0.0",    
    "@angular/platform-browser": "^16.2.12",    
    "@angular/platform-browser-dynamic": "^16.2.12",    
    "@angular/router": "^16.2.12",    
    "@fortawesome/angular-fontawesome": "^0.13.0",    
    "@fortawesome/fontawesome-svg-core": "^6.2.0",    
    "@fortawesome/free-solid-svg-icons": "^6.2.0",    
    "file-saver": "^2.0.5",    
    "font-awesome": "^4.7.0",    
    "hammerjs": "^2.0.8",    
    "jasmine-auto-spies": "^6.9.9",    
    "karma": "^6.4.0",    
    "karma-verbose-reporter": "^0.0.8",    
    "ngx-doc-viewer": "14.0.0",    
    "ngx-panzoom": "^16.0.0",    
    "ngx-truncate-text": "^3.0.0",    
    "rxjs": "~7.5.0",    
    "screenfull": "^6",    
    "tslib": "^2.3.0",    
    "zone.js": "~0.13.3"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "^16.2.13",    
    "@angular/cli": "~16.2.13",    
    "@angular/compiler-cli": "^16.2.12",    
    "@types/file-saver": "^2.0.5",    
    "@types/jasmine": "~4.0.0",    
    "eslint": "^8.57.0",    
    "jasmine": "^4.3.0",    
    "jasmine-core": "~4.1.0",    
    "karma": "~6.3.0",    
    "karma-chrome-launcher": "~3.1.0",    
    "karma-coverage": "~2.2.0",    
    "karma-jasmine": "~5.0.0",    
    "karma-jasmine-html-reporter": "~1.7.0",    
    "typescript": "^5.1.6"  
  }
}

可能的原因及解决方案 #

1. 核心依赖版本冲突 #

从package.json可见，@angular/cdk和@angular/material是7.0.0版本，而Angular核心框架是16.2.12，版本跨度极大，属于严重不兼容，这是编译失败的核心原因。团队其他成员可能已经私下升级了这两个依赖，或者通过锁文件安装了适配的兼容版本。

• 解决方案：
  执行命令升级CDK和Material到与Angular 16匹配的版本：

  npm install @angular/cdk@^16.2.12 @angular/material@^16.2.12 --save
  

  之后重新安装依赖并启动：

  npm install && ng serve
  

2. 本地依赖安装异常 #

本地node_modules可能存在损坏、缺失，或者锁文件与团队成员不一致，导致实际安装的依赖版本不符合预期。

• 解决方案：
  • 删除本地依赖文件夹和锁文件：

    # Mac/Linux
    rm -rf node_modules package-lock.json
    # Windows
    rd /s /q node_modules && del package-lock.json
    

  • 重新安装依赖：npm install
  • 再次启动应用：ng serve

3. Node.js版本不匹配 #

Angular 16要求Node.js版本至少为16.14.x或18.x LTS，如果本地Node版本过低或过高，都可能引发编译错误。

• 解决方案：
  • 检查本地Node版本：node -v
  • 升级到18.x LTS版本（推荐），可使用nvm（Node版本管理器）切换版本：

    nvm install 18
    nvm use 18
    

4. 本地CLI或缓存问题 #

即使全局CLI版本一致，本地项目的CLI依赖可能存在损坏，或者npm缓存有问题。

• 解决方案：
  • 清理npm缓存：npm cache clean --force
  • 重新安装本地CLI依赖：

    npm install @angular/cli@~16.2.13 --save-dev
    

  • 重新启动应用：ng serve

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