After upgrading my application from Angular 14 to 16, I am getting 100's of errors in npm packages that I have used

Question

I upgraded my angular application from v14 to v16. Since there were so many peer dependencies I used --force flag to upgrade. Now when I compile getting so many errors as shown below in screenshot.

Errors look like these

What is compatible to Angular IVY. And how to check for any package if it is Angular IVY compatible or not?

Here's my package.json

{
  "name": "",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4300",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.3",
    "@angular/cdk": "^16.0.2",
    "@angular/common": "~16.0.3",
    "@angular/compiler": "~16.0.3",
    "@angular/core": "~16.0.3",
    "@angular/forms": "~16.0.3",
    "@angular/platform-browser": "~16.0.3",
    "@angular/platform-browser-dynamic": "~16.0.3",
    "@angular/router": "~16.0.3",
    "@ng-bootstrap/ng-bootstrap": "12.1.2",
    "@ng-idle/core": "^11.1.0",
    "@ng-idle/keepalive": "^11.0.3",
    "@ng-select/ng-select": "^4.0.4",
    "@ngx-formly/bootstrap": "5.5.10",
    "@ngx-formly/core": "^5.10.8",
    "@ngx-loading-bar/core": "^5.1.2",
    "@ngx-loading-bar/http-client": "^5.1.2",
    "@ngx-loading-bar/router": "^5.1.2",
    "@types/datatables.net": "^1.10.20",
    "@uirouter/core": "^6.0.7",
    "add": "^2.0.6",
    "angular-datatables": "^12.0.0",
    "angular-formly": "^8.4.1",
    "angular2-text-mask": "^9.0.0",
    "bootstrap": "4.5.3",
    "classlist.js": "^1.1.20150312",
    "datatables.net": "^1.10.25",
    "datatables.net-dt": "^1.11.3",
    "file-saver": "^2.0.5",
    "jquery": "^3.5.1",
    "jquery-idletimer": "^1.0.0",
    "moment": "^2.29.1",
    "ng": "0.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-bootstrap": "^6.2.0",
    "ngx-cookie-service": "^12.0.3",
    "ngx-currency": "^2.5.2",
    "ngx-currency-input": "^1.0.2",
    "ngx-filter-pipe": "^2.1.2",
    "ngx-mask": "^11.1.4",
    "ngx-order-pipe": "^2.1.1",
    "os": "^0.1.1",
    "popper": "^1.0.1",
    "rxjs": "~6.6.0",
    "rxjs-compat": "^6.6.3",
    "tslib": "^2.0.0",
    "xlsx": "^0.13.5",
    "xlsx-js-style": "^1.2.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.3",
    "@angular/cli": "^16.0.3",
    "@angular/compiler-cli": "~16.0.3",
    "@angular/localize": "^16.0.3",
    "@types/bootstrap": "^5.1.6",
    "@types/file-saver": "^2.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/jquery": "^3.5.6",
    "@types/node": "^12.20.28",
    "angular-file": "^3.6.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.6",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^5.0.4"
  }
}

Answer 1

just delete your node modules and .angular folders and run command in terminal

npm i --force

this solved everything for me... comment if not worked

Answer 2

First thing is, you have to check all your third party libraries compatibility/support to angular 16. This might feel painfully slow but go one by one. Once done more often than not when you do npm install, it works (dont force it). if it doesnt, check what error message says. Also use npm outdated to find out the list of outdated dependencies. After that use the official guidelines (https://update.angular.io/?l=3&v=14.0-16.0) that will guide you through what else needs to change. A global search for whats deprecated in your project would help.