I upgraded my Angular app from 11 to 12.

I used the commands:

1: ng update @angular/core@12 @angular/cli@12 --force

2: ng update @angular/cdk@12 @angular/material@12 --force

I’ve encountered some issues after upgrading to Angular 12,
which were not present in version 11.

I’ve already tried the following steps: removing the node_modules folder, deleting package-lock.json, and running npm cache clean –force.

npm rebuild node-sass –force

npm install –save-dev –unsafe-perm node-sass

However, the problem still persists.

I’ve spent the past two days troubleshooting but haven’t found a solution yet.

Any help would be greatly appreciated.

Here is my package.json

{
  "name": "pbx-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-staging": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=staging --base-href /",
    "build-prod": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=production --base-href /",
    "build-replica": "node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=replica --base-href /",
    "build-dev": "SET NODE_OPTIONS=--openssl-legacy-provider && node --max_old_space_size=2048 node_modules/@angular/cli/bin/ng build --configuration=dev --base-href /",
    "test": "ng test",
    "lint": "ng lint --format json > jsonOutput.json",
    "report": "ng-lint-report --jsonfile jsonOutput.json",
    "ng-lint": "npm run lint && npm run report",
    "e2e": "ng e2e",
    "ng serve": "ng serve --port 4001",
    "clean": "rmdir /s /q node_modules",
    "reinstall": "npm run clean && npm install",
    "rebuild": "npm run clean && npm install && rmdir /s /q dist && npm run build --configuration production",
    "local": "SET NODE_OPTIONS=--openssl-legacy-provider && ng serve --hmr --port 3001 --configuration=dev"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.17",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "~12.2.17",
    "@angular/compiler": "~12.2.17",
    "@angular/core": "~12.2.17",
    "@angular/fire": "^5.2.3",
    "@angular/flex-layout": "~9.0.0-beta.31",
    "@angular/forms": "~12.2.17",
    "@angular/material": "^12.2.13",
    "@angular/platform-browser": "~12.2.17",
    "@angular/platform-browser-dynamic": "~12.2.17",
    "@angular/pwa": "^0.901.3",
    "@angular/router": "~12.2.17",
    "@angular/service-worker": "~12.2.17",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@material-extended/mde": "~2.3.1",
    "@ng-select/ng-select": "^4.0.4",
    "@ngrx/effects": "^9.2.0",
    "@ngrx/store": "^9.2.0",
    "@ngrx/store-devtools": "^9.2.1",
    "@ngx-pwa/local-storage": "^9.0.3",
    "@ngx-translate/core": "^11.0.1",
    "@swimlane/ngx-graph": "^7.2.0",
    "@types/sharedworker": "0.0.29",
    "angularx-qrcode": "~2.3.5",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.0.0",
    "d3-shape": "^1.3.5",
    "fast-xml-parser": "^3.21.1",
    "file-saver": "^2.0.2",
    "firebase": "^7.6.0",
    "luxon": "^1.23.0",
    "moment-timezone": "^0.5.43",
    "ng-pick-datetime": "^7.0.0",
    "ng-push-ivy": "^1.0.8",
    "ng2-charts": "^2.3.0",
    "ng6-breadcrumbs": "^1.0.7",
    "ngx-color-picker": "^8.2.0",
    "ngx-dropzone": "^2.2.2",
    "ngx-gallery-9": "^1.0.6",
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-socket-io": "~3.2.0",
    "ngx-toastr": "^11.2.1",
    "ngx-ui-loader": "^9.1.1",
    "ngx-ui-switch": "^9.0.2",
    "primeicons": "^2.0.0",
    "primeng": "~9.1.3",
    "rxjs": "~6.5.3",
    "sip.js": "^0.15.11",
    "sweetalert2": "^9.17.2",
    "ts-md5": "^1.2.7",
    "tslib": "^2.0.0",
    "util": "^0.12.5",
    "uuid": "^9.0.0",
    "xlsx": "^0.15.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.18",
    "@angular/cli": "~12.2.18",
    "@angular/compiler-cli": "~12.2.17",
    "@angular/language-service": "~12.2.17",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/luxon": "^1.22.0",
    "@types/node": "~9.6.61",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.4",
    "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",
    "ng-lint-report": "^0.2.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5"
  }
}