Build Issue With Angular Project while updating Angular 7 to 13 - json

Question

I wanted to upgrade the Angular version in my project from 7 to 13, but I am facing some issues. Below you can see my package in Json format:
{
"name": "comresi-angular",
"version": "0.0.0",
"scripts": {
"start": "ng serve",
"start:local": "ng serve --base-href=/",
"build:prod": "ng build --configuration production",
"build:dev": "ng build ----configuration dev",
"build:local": "npm run build:dev && npm run copy_tomcat",
"copy_tomcat": "xcopy \"../webapp/resources\\*\" \"%CATALINA_HOME%\\webapps\\erlcr\\resources\" /s /i /y > nul"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.1.0",
"#angular/cdk": "~13.1.0",
"#angular/common": "~13.1.0",
"#angular/compiler": "~13.1.0",
"#angular/core": "~13.1.0",
"#angular/forms": "~13.1.0",
"#angular/http": "^7.0.0",
"#angular/material": "~13.1.0",
"#angular/platform-browser": "~13.1.0",
"#angular/platform-browser-dynamic": "~13.1.0",
"#angular/service-worker": "~13.1.0",
"#angular/router": "~13.1.0",
"#ngx-translate/core": "11.0.1",
"#ngx-translate/http-loader": "4.0.0",
"#types/bingmaps": "0.0.1",
"#types/jquery": "^3.3.22",
"#types/npm": "^2.0.29",
"#types/slickgrid": "^2.1.26",
"ag-grid-angular": "^19.0.0",
"ag-grid-community": "^19.0.0",
"angular-maps": "^6.0.1",
"angular-slickgrid": "^2.1.8",
"bingmaps": "^2.0.3",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"dhtmlx-gantt": "file:gantt_7.1.8_evaluation",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jqwidgets-scripts": "^6.1.0",
"moment": "^2.19.1",
"rxjs": "~7.4.0",
"rxjs-compat": "^7.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "13.1.2",
"#angular/cli": "~13.1.0",
"#angular/compiler-cli": "~13.1.0",
"#angular/language-service": "~13.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~4.4.3",
"rxjs": "~7.4.0"
}
}
but I am getting the following error while running npm install:
While resolving: comresi-angular#0.0.0
Found: #angular-devkit/build-angular#0.10.7
node_modules/#angular-devkit/build-angular
dev #angular-devkit/build-angular#"13.1.2" from the root project
Could not resolve dependency:
dev #angular-devkit/build-angular#"13.1.2" from the root project
Conflicting peer dependency: #angular/core#13.1.1
node_modules/#angular/core
peer #angular/core#"13.1.1" from #angular/service-worker#13.1.1
node_modules/#angular/service-worker
#angular/service-worker#"~13.1.0" from the root project
peerOptional #angular/service-worker#"^13.0.0 || ^13.1.0-next" from #angular-devkit/build-angular#13.1.2
node_modules/#angular-devkit/build-angular
dev #angular-devkit/build-angular#"13.1.2" from the root project
Could you help me to understand why I am getting that error?

Answer 1

If you use the official angular update website and you put your angular versions From 7.0 To 13.0 you will get the following warning:
so obviously you need to go through all the major versions until v13.0

Answer 2

As per my experience with project. It is better to build a simple product with latest version (or version which you want). and add a component from your existing application gradually.