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

7.9k Views Asked by At

any help for this message i still migrate my angular project from 8.2 to 15 ( **version by version **) but i still have this problem : This version of CLI is only compatible with Angular versions ^15.0.0, but Angular version 16.0.0 was found instead.

**My ng version **




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

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"
    }
  }
}

  • i try upgrade the version of AngularCli but the same error ng update @angular/cli --migrate-only --from=16.0 --to=<15.0> --allow-dirty --force

  • i delete the : node_modules\ @angular-builders\custom-webpack\node_modules

  • npm install -g @angular/cli@15

  • npm cache clear --force

1

There are 1 best solutions below

3
On

It is erroring because you have Angular 16 installed but the CLI is version 15.x.

To upgrade Angular CLI, you can use the ng update command. For example, to update to the latest stable release of the core framework and CLI, you can run:

ng update @angular/cli @angular/core

You do not have to use the latest version, but the CLI must be at or above the version of Angular you wish to use.

https://angular.io/cli/update

I would recommend (and I advise this for all Angular upgrades, especially if you use Angular material), that you use the exceptionally excellent interactive upgrade guide.

This link for example will show you all the steps for your version gap.

https://update.angular.io/?v=8.2-15.0

The command you show in your example is from 16 to 15 which would be a downgrade, the tool won't support migration in that direction. You can only go from a lower version to higher version.