Upgrading Angular v11 to v12 getting SassError on ng serve

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"
}
}

Continue reading...