Build Issue With Angular Project while updating Angular 7 to 13

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: [email protected]
 Found: @angular-devkit/[email protected]
 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/[email protected]
 node_modules/@angular/core
   peer @angular/core@"13.1.1" from @angular/[email protected]
   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/[email protected]
     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.