I can't build after Angular 16 upgrade, I don't know how to solve it

Question

I upgraded my Angular 7 Project to Angular 16. I did the upgrade steps with the Angular Upgrade Guide. Apparently I did something wrong.

I just wanted to upgrade to the latest version. Everything was messed up, the project couldn't be opened.

When I try to run my application with ng serve after the upgrade, I get an error and I haven't been able to solve it for 2 days.

./src/app/shared/styles/themes/theme-f.scss:4:6 - Error: Module parse failed: Unexpected token (4:6) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | Component: layout | ========================================================================== */ body, .wrapper .section-container { | background-color: #f5f7fa; | }

angualar.js and package.json files are below.

package.json

{
  "name": "angle",
  "version": "0.0.1",
  "description": "Angle - Bootstrap Admin Template",
  "author": "@themicon_co",
  "license": "https://wrapbootstrap.com/help/licenses",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "postinstall": "node ./node_modules/protractor/bin/webdriver-manager update",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular-devkit/build-angular": "^16.2.7",
    "@angular/animations": "16.2.10",
    "@angular/common": "16.2.10",
    "@angular/compiler": "16.2.10",
    "@angular/core": "16.2.10",
    "@angular/forms": "16.2.10",
    "@angular/http": "7.2.16",
    "@angular/platform-browser": "16.2.10",
    "@angular/platform-browser-dynamic": "16.2.10",
    "@angular/router": "16.2.10",
    "@asymmetrik/ngx-leaflet": "16.0.1",
    "@asymmetrik/ngx-leaflet-draw": "16.0.0",
    "@auth0/angular-jwt": "5.1.2",
    "@devexpress/analytics-core": "23.1.6",
    "@fortawesome/fontawesome-free": "6.4.2",
    "@ngx-translate/core": "15.0.0",
    "@ngx-translate/http-loader": "8.0.0",
    "@turf/turf": "6.5.0",
    "@types/leaflet-markercluster": "1.0.3",
    "@types/leaflet.markercluster": "1.5.3",
    "bootstrap": "5.3.2",
    "chart.js": "4.4.0",
    "core-js": "3.33.1",
    "css-loader": "^6.8.1",
    "devexpress-reporting": "23.1.6",
    "devexpress-reporting-angular": "23.1.6",
    "devextreme": "23.1.6",
    "devextreme-angular": "23.1.6",
    "devextreme-aspnet-data-nojquery": "^3.0.0",
    "devextreme-cldr-data": "1.0.3",
    "easy-pie-chart": "2.1.7",
    "file-saver": "2.0.5",
    "globalize": "1.7.0",
    "guid-typescript": "1.0.9",
    "jquery": "3.7.1",
    "jquery-sparkline": "2.4.0",
    "jquery.browser": "0.1.0",
    "leaflet": "1.9.4",
    "leaflet-draw": "1.0.4",
    "leaflet-markercluster": "0.2.2",
    "leaflet.markercluster": "1.5.3",
    "ngx-bootstrap": "11.0.2",
    "ngx-color-picker": "15.0.0",
    "ngx-permissions": "16.0.1",
    "rxjs": "7.8.1",
    "rxjs-compat": "^6.6.7",
    "screenfull": "6.0.2",
    "simple-line-icons": "2.5.5",
    "source-sans-pro": "3.6.0",
    "style-loader": "^3.3.3",
    "ts-helpers": "1.1.2",
    "turf-centroid": "3.0.12",
    "url-loader": "^4.1.1",
    "zone.js": "0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.2.7",
    "@angular/cli": "16.2.7",
    "@angular/compiler-cli": "16.2.10",
    "@angular/language-service": "16.2.10",
    "@turf/centroid": "6.5.0",
    "@types/jasmine": "5.1.1",
    "@types/jasminewd2": "2.0.12",
    "@types/leaflet": "1.9.7",
    "@types/leaflet-draw": "1.0.9",
    "@types/node": "20.8.7",
    "jasmine-core": "5.1.1",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.4.2",
    "karma-chrome-launcher": "3.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "karma-read-json": "1.1.0",
    "loaders.css": "0.1.2",
    "node-sass": "^9.0.0",
    "protractor": "7.0.0",
    "sass": "^1.69.4",
    "sass-loader": "^13.3.2",
    "ts-node": "10.9.1",
    "typescript": "^4.9.3",
    "webdriver-manager": "12.1.9",
    "webpack": "^5.89.0"
  }
}

angular.json

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/app/core/preloader/preloader.scss",
      "node_modules/devextreme/dist/css/dx.common.css",
      "node_modules/devextreme/dist/css/dx.material.orange.dark.css",
      "node_modules/leaflet/dist/leaflet.css",
      "node_modules/leaflet-draw/dist/leaflet.draw.css",
      "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
      "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.js",
      "src/app/core/wrapper/wrapper.js",
      "src/app/core/preloader/preloader.js",
      "node_modules/chart.js/dist/Chart.bundle.js"
    ]
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "3mb",
          "maximumError": "5mb"
        }
      ]
    }
  }
}