Angular从8.2逐步升级到15时CLI版本兼容问题求助

This version of CLI is only compatible with Angular versions ^15.0.0,
but Angular version 16.0.0 was found instead.

我的ng版本信息 #

_                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 15.2.8
Node: 16.13.0
Package Manager: npm 8.12.1
OS: win32 x64

Angular: 16.0.0
... common, core, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.2.8
@angular/animations             8.2.14
@angular/compiler               8.2.14
@angular/compiler-cli           15.2.7
@angular/forms                  8.2.14
@angular/language-service       8.2.14
@angular/upgrade                8.2.14
@schematics/angular             15.2.8
rxjs                            6.6.7
typescript                      4.8.4

Angular.json配置 #

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "@coreuipro/angular": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "node_modules/flag-icon-css/css/flag-icon.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/simple-line-icons/css/simple-line-icons.css",
              "src/scss/style.scss",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",

              
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
              
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/chart.js/dist/Chart.min.js",
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js",
              

              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "@coreuipro/angular:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "@coreuipro/angular:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "@coreuipro/angular:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/chart.js/dist/Chart.bundle.min.js",
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "styles": [
              "node_modules/flag-icon-css/css/flag-icon.css",
              "node_modules/font-awesome/css/font-awesome.css",
              "node_modules/simple-line-icons/css/simple-line-icons.css",
              "src/scss/style.scss"
            ],
            "assets": [
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "@coreuipro/angular-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "@coreuipro/angular:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "@coreuipro/angular",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

已尝试的解决方法 #

• 执行命令 ng update @angular/cli --migrate-only --from=16.0 --to=<15.0> --allow-dirty --force，错误依旧
• 删除 node_modules\@angular-builders\custom-webpack\node_modules 目录
• 执行命令 npm install -g @angular/cli@15
• 执行命令 npm cache clear --force

解决方案 #

核心问题是项目依赖版本混乱：存在Angular 16的核心包、Angular 8的遗留包，而CLI是15版本，三者不兼容。需要统一所有Angular包到15.2.x版本：

1. 清理现有依赖文件

   • 删除项目根目录下的 node_modules 文件夹
   • 删除 package-lock.json 文件

2. 统一Angular包版本
   手动修改 package.json，将所有@angular/开头的包版本设置为15.2.8（与CLI版本匹配），包括：

   • @angular/animations
   • @angular/common
   • @angular/core
   • @angular/compiler
   • @angular/forms
   • @angular/platform-browser
   • @angular/platform-browser-dynamic
   • @angular/router
   • @angular/language-service
   • @angular/upgrade
   • @angular/compiler-cli

3. 重新安装依赖
   执行命令：

   npm install
   

4. 验证版本一致性
   安装完成后执行：

   ng version
   

   确保所有Angular核心包与CLI版本均为15.2.x，无16或8版本残留。

5. 建议后续逐步升级
   从8.2直接跨版本到15容易触发兼容问题，后续建议按官方步骤逐步升级：从8.2→9.x→10.x→…→15.x，每次升级后运行ng update处理迁移脚本，保障项目平稳过渡。

内容的提问来源于stack exchange，提问作者Ghazi ben halima