25

My Ionic project was running fine a month ago. Today when I tried ionic serve or ionic build, I get the below error:

Enter image description here

What CLI version is compatible with Angular version 12.2.13? If you really want to know why I am asking this question you can ready further.

So I followed the advice to upgrade to Angular 13 on the official Angular website, I used the following command: npm @angular/cli@13 update @angular/core@13 @angular/cli@13.

This route asked me to upgrade my Node.js to version 16 (latest, current). After upgrading Node.js to v16 I retried to upgrade to Angular 13 and during this process the installation failed/stopped due to unsupported dependencies and so on.

I googled most solutions, tried, and wound up with a project where all my plugins can't be found and so on. So I reversed the above process by uninstalling Node.js v16 to v12, removed npm, the node_modules folder and now I am back at the point where I am getting the below error in the picture.

Here's my developer environment from ionic info:

Enter image description here

Here's a copy of my package.json file:

    "dependencies": {
    "@angular/common": "~12.2.8",
    "@angular/core": "~12.2.8",
    "@angular/forms": "~12.2.8",
    "@angular/platform-browser": "~12.2.8",
    "@angular/platform-browser-dynamic": "~12.2.8",
    "@angular/router": "~12.2.8",
    "@babel/compat-data": "^7.8.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/call-number": "^5.36.0",
    "@ionic-native/camera": "^5.23.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-transfer": "^5.23.0",
    "@ionic-native/full-screen-image": "^5.23.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/ionic-webview": "^5.36.0",
    "@ionic-native/keyboard": "^5.36.0",
    "@ionic-native/onesignal": "^5.36.0",
    "@ionic-native/photo-viewer": "^5.23.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage-angular": "^3.0.6",
    "bufferutil": "^4.0.1",
    "call-number": "^1.0.1",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "utf-8-validate": "^5.0.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.2",
    "@angular/cli": "^12.2.8",
    "@angular/compiler": "^12.2.8",
    "@angular/compiler-cli": "^12.2.8",
    "@angular/language-service": "~12.2.8",
    "@ionic/angular-toolkit": "^5.0.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-android": "^9.1.0",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "git+https://github.com/apache/cordova-plugin-file-transfer.git",
    "cordova-plugin-inappbrowser": "^4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-sqlite-storage": "^6.0.0",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "onesignal-cordova-plugin": "^3.0.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.3.5"
  },
  "description": "Vuyou's Funerals",
  "cordova": {
    "plugins": {
      "cordova-plugin-inappbrowser": {},
      "mx.ferreyra.callnumber": {},
      "cordova-plugin-file-transfer": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-device": {},
      "cordova-plugin-statusbar": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-app-version": {}
    },
    "platforms": []
  }
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Morgs
  • 1,558
  • 3
  • 19
  • 34
  • 1
    Updated angular locally, using ngUpdate – Developer Nov 12 '21 at 17:46
  • @GaurangDhorda I don't think I understand what you mean? What I am asking is, what is the correct CLI version for `Angular v12.2.13` ? – Morgs Nov 12 '21 at 17:50
  • 3
    try changing `angular-devkit/build-angular` version from `^13.0.2` to `^12.2.8` – AlexElin Nov 12 '21 at 21:36
  • @AlexElin you saved my entire world! Thank you very much now my app is running again. I wonder how on earth the CLI version changed – Morgs Nov 13 '21 at 14:24
  • 8
    This question is being [discussed on Meta](https://meta.stackoverflow.com/questions/413532/audit-that-doesnt-have-full-error-message-as-text), which explains its sudden scrutiny. – Ian Campbell Dec 07 '21 at 21:28
  • 6
    [Please do not upload images of code/errors when asking a question.](//meta.stackoverflow.com/q/285551) – Donald Duck Dec 09 '21 at 11:35

9 Answers9

36
npm i @angular-devkit/build-angular@12.2.13 --force
npm i @angular/cli@12
Ryan M
  • 18,333
  • 31
  • 67
  • 74
Nestor Villafañe Mass
  • 377
  • 2
  • 2
  • 2
    worked on this bug for almost 1 day, and got a solution here. – Karthik Saravanan Jun 08 '22 at 12:15
  • I used `ng update` and everything was updated except `@angular-builders/custom-webpack` so I had to do it manually. Thanks for the answer and saving me time. – kai Apr 18 '23 at 08:38
16

I had the same error, but I was using V 11.2.14.

The simple solution is to go to the package.json file and change

"@angular-devkit/build-angular": "^13.0.2"

(it is inside dependencies)

to your compatible version.

So when I changed it to

"@angular-devkit/build-angular": "~0.1102.3",

it worked.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ahmed
  • 595
  • 4
  • 25
5

If you want to update your angular version across multiple major versions - if you get the below error while using "ng update" - "Updating multiple major versions of '@angular/cli' at once is not supported. Please migrate each major version individually. Run 'ng update @angular/cli@12' in your workspace directory to update to latest '12.x' version of '@angular/cli'."

You have to do the following steps to update step by step:

  1. run ng update
  2. you will get a list of items to be updated with the command to update
  3. run each command to update along with --allow-dirty --force

for and eg: enter image description here

to update angular cdk here run ng update @angular/cdk@12 --allow-dirty --force

  1. do the same as above for all the items on the list
  2. after completing updating the items with the command given, again run ng build and check whether all the errors are gone.
  3. if you have more errors regarding the update again run ng update and continue with steps 2 to 5 until all the update errors are resolved
Mifdha Milan
  • 327
  • 4
  • 6
3

Whoever is facing this issue update "@angular-builders/custom-webpack" to its latest version in package.json file.

Ankush Sood
  • 41
  • 2
1

if you don't want to upgrade your angular version then best solution for this type of errors is just delete your project and again clone repository and run npm install.

Babar Iqbal
  • 11
  • 1
  • 1
    I had this error where it was saying that this version of CLI is only compatible only with angular 15 but angular 13.0 was found instead. so I did above and it worked for me. – Babar Iqbal Dec 30 '22 at 18:45
1

For me it was about updating this package (I upgraded from angular 13 to 14 but this was left out):

yarn add @angular-builders/custom-webpack@14 --dev

Alexandros Antoniou
  • 61
  • 1
  • 9
0

Steps to fix the issue

Below are generic steps to fix the issue which can be followed for this or similar issues,

  • Update Angular CLI for a workspace (Local)
npm install --save -dev @angular/cli@latest

or

Please use the below commands for angular 9 and 10 onwards,

npm install --save --only=dev @angular/cli@latest

Make sure to install the global version using the command with ‘-g’ to install properly.

npm install -g @angular/cli@latest
  • Run the Update command to get a list of all dependencies required to be upgraded.
ng update
  • Next Run the update command below for each individual Angular core package,
ng update @angular/cli @angular/coreng update @angular/cli @angular/core

However, I had to add ‘–force‘ and ‘–allow-dirty‘ flags command additionally to fix all other pending issues.

ng update @angular/cli @angular/core --allow-dirty

Or

ng update @angular/cli @angular/core --allow-dirty --force

The final step is to verify the build of the project.

ng build
Demodev
  • 94
  • 10
0

I was facing the same issue with Angular 13.

This version of CLI is only compatible with Angular versions ^14.0.0,

Solved it using

npm i @angular-devkit/build-angular@13.0.2 --force
umunBeing
  • 514
  • 1
  • 5
  • 15
0

I solved this problem by updating all my ng dependencies to the same version as my cli version.

Run ng version

This was how it looked like.

@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      16.0.0
@schematics/angular             16.0.0
rxjs                            7.5.7
typescript                      5.0.4

Then update the outdated versions.

ng update @angular-devkit/build-angular
ng update @angular-devkit/core

Run ng version. This should look like this.

@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@schematics/angular             16.0.0
rxjs                            7.5.7
typescript                      5.0.4

This worked for me.

joseph chikeme
  • 184
  • 1
  • 12