Angular upgrade from 9 to 10 return errors

Question

I'm receiving a plethora of errors while upgrading from Angular v9 to v10.

First I used the command

npx @angular/cli@10 update @angular/core@10 @angular/cli@10

which update multiple dependencies in my package json. Then, after running the application I received an error that it seems to be fixed by setting the start command with:

set NODE_OPTIONS=--openssl-legacy-provider && ng serve -c dev

after doing that there is a cascade of errors in the terminal (see screens attached)

this is my package.json file

{
  "name": "www",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve -c dev",
    "start:fedev": "ng serve -c fedev",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.2.5",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^10.2.5",
    "@angular/compiler": "^10.2.5",
    "@angular/core": "^10.2.5",
    "@angular/forms": "^10.2.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^10.2.5",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "^10.2.5",
    "@angular/platform-browser-dynamic": "^10.2.5",
    "@angular/router": "^10.2.5",
    "@ng-bootstrap/ng-bootstrap": "^6.2.0",
    "@ng-select/ng-select": "3.7.2",
    "@ngx-translate/core": "11.0.0",
    "@ngx-translate/http-loader": "4.0.0",
    "@types/html2canvas": "^1.0.0",
    "angular2-toaster": "^7.0.0",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "dom-to-image": "^2.6.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html-to-pdfmake": "^2.4.9",
    "html2canvas": "^1.4.1",
    "igniteui-angular": "^9.0.0",
    "jquery": "^3.3.1",
    "jspdf": "^2.5.1",
    "moment": "^2.27.0",
    "ng2-charts": "~2.2.3",
    "ngx-custom-validators": "^6.0.0",
    "ngx-gallery-9": "^1.0.6",
    "pdfmake": "^0.2.6",
    "popper.js": "^1.14.4",
    "querystring": "^0.2.1",
    "rxjs": "~6.5.4",
    "webpack": "^4.39.0",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.4",
    "@angular/cli": "~10.2.4",
    "@angular/compiler-cli": "^10.2.5",
    "@angular/language-service": "^10.2.5",
    "@nativescript/schematics": "^9.0.0",
    "@types/jasmine": "~3.5.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~13.7.1",
    "codelyzer": "<7.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "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",
    "node-sass": "^4.12.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslib": "^2.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.0.8",
    "webpack-dev-server": "^5.0.1"
  }
}

Has anyone encountered these problems?

Answer 1

I remember my terminal being all red when I took on a similar mission. Upgrading my Angular app which was then running on Angular 9.

Looking from the imports you're using, the project's complexity appears to be high.

The exact issues that you're facing might be different from what I encountered. But here are some learnings from my experience:

1. Most importantly check your Node & npm versions. Make sure they're compatible with the Angular CLI version you have selected. If incase you needed to upgrade/ downgrade your Node/ npm version clean your node_modules and package-lock.json before re-installing the dependencies.
2. All the angular packages should run on similar version. In the JSON you provided, @angular/cdk is still 9.x.
3. Also important is that you run an appropriate 'ts-node' and 'tslint' version which is compatible to the selected Angular version. Along with that update the tsconfig.json file accordingly.
4. Lastly you also need to check the other libraries that you have imported the right compatible version.

One approach worked for me was to start at the top fixing one error message at once.

Answer 2

Error fixed.

One error was related to having an older version of igniteui-angular. After the upgrade the errors disappeared.

The second error (CSS syntax error) was related to the path pointing to the file. It seems that Angular 10 does not like the format ./url... but it needed ~url... and it started working.

P.S: I upgraded version of angular/cdk but I don't know if this one was one of the causes of the problem).