I'm having trouble updating my Angular version. When I use ng update I get the following output:
Name Version Command to update
----------------------------------------------------------------------------------------
@angular/cdk 12.1.2 -> 12.2.0 ng update @angular/cdk
@angular/cli 12.1.2 -> 12.2.0 ng update @angular/cli
@angular/core 12.1.2 -> 12.2.0 ng update @angular/core
@angular/material 12.1.2 -> 12.2.0 ng update @angular/material
Afterwards I try to update all four of them using the command:
ng update @angular/cdk @angular/cli @angular/core @angular/material -C
The package.json is updated and afterwards npm i is run in order to install all packages. Here I encounter the following error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/build-angular@12.1.2
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^12.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/localize@12.2.0
npm ERR! node_modules/@angular/localize
npm ERR! peerOptional @angular/localize@"^12.0.0 || ^12.2.0-next" from @angular-devkit/build-angular@12.2.0
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^12.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I do not know why it says Found: @angular-devkit/build-angular@12.1.2 when in the package.json all @angular related files have ~12.2.0 declared as version.
Remove node_modules and install it again.
Also make surepackage.json has no duplicated dependencies.
you should never upgrade angular all the way across the board like that. Instead its in hierarchical order - because many of those dependencies are just dependent upon one another. so several of them disappear.
Its very easy to fix this problem by just deleting node_modules and running npm install again.
this time though in order:
npm install @angular/cli@latest -g
ng update @angular/cli,
ng update @angular/common
npm install @angular/cdk@latest
npm install @angular/material@latest
in angular 12.2 there are warnings about chokidar if you run npm audit fix it won't do anything, and there are several others - you just have to wait till they fix them because they're dev dependencies.
this is taken from a live project current working version with universal:{
"@angular/animations": "~12.1.0",
"@angular/cdk": "^12.2.0",
"@angular/common": "~12.1.0",
"@angular/compiler": "~12.1.0",
"@angular/core": "~12.1.0",
"@angular/fire": "^6.1.5",
"@angular/forms": "~12.1.0",
"@angular/platform-browser": "~12.1.0",
"@angular/platform-browser-dynamic": "~12.1.0",
"@angular/platform-server": "~12.1.0",
"@angular/router": "~12.1.0",
"@angular/service-worker": "~12.1.0",
"@easypost/api": "^3.11.2",
"@nguniversal/express-engine": "^12.1.0",
"bootstrap": "^5.0.2",
"dayjs": "^1.10.6",
"express": "^4.15.2",
"firebase": "^8.8.1",
"ngx-quill": "^14.1.2",
"quill": "^1.3.7",
"quill-image-resize-module": "^3.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
}
Try with deleting node_modules folder and package-lock.json file and then reinstall npm which might resolve your issue.
So, run the following commands:
remove node_modules
remove package-lock.json
npm install