Getting 'Module parse Failed' Error after Upgrading Angular application from 14 to 15

Question

I have upgraded my project from Angular 14 to 15 and see this error and I don't find any solution.

./node_modules/@swimlane/ngx-datatable/assets/icons.css?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@charset "UTF-8"; | | @font-face {

./node_modules/@swimlane/ngx-datatable/themes/material.css?ngGlobalStyle:18:0 - Error: Module parse failed: Unexpected token (18:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | That's all. | */

.ngx-datatable.material { | background: #fff; | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);

./src/app/shared/styles/themes/theme-a.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/@angular-devkit/build-angular/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; }

Here is my Package.json

{
  "name": "abconline",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "postinstall": "",
    "start": "npm run prebuild && npm run serve",
    "build": "npm run prebuild && npm run buildprod",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --runInBand",
    "test:cov": "ng test --coverage",
    "lint": "ng lint",
    "modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
    "e2e": "ng e2e",
    "serve": "ng serve",
    "prebuild": "node ./src/environments/writeversion.ts",
    "buildprod": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng build --prod --base-href=/abc/abconline/",
    "builddeploy": "node --optimize_for_size --max_old_space_size=2048 --gc_interval=100 ./node_modules/@angular/cli/bin/ng build --configuration=deploy --base-href=/abc/abconline/",
    "releasebuild": "npm run prebuild && npm run builddeploy",
    "checkheap": "node -e \"console.log(`node heap limit = ${require('v8').getHeapStatistics().heap_size_limit / (1024 * 1024)} Mb`)\"",
    "compodoc": "npx compodoc -p tsconfig.json -n \"abc Online Application Documentation\" --theme vagrant --includes ./compodoc_add_docs --includesName \"System Information\" "
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "15.2.10",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "15.2.10",
    "@angular/compiler": "15.2.10",
    "@angular/core": "15.2.10",
    "@angular/forms": "15.2.10",
    "@angular/localize": "15.2.10",
    "@angular/material": "15.2.9",
    "@angular/platform-browser": "15.2.10",
    "@angular/platform-browser-dynamic": "15.2.10",
    "@angular/router": "15.2.10",
    "@auth0/angular-jwt": "5.0.2",
    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@microsoft/applicationinsights-angularplugin-js": "3.0.1",
    "@microsoft/applicationinsights-web": "2.8.10",
    "@ngx-translate/core": "14.0.0",
    "@ngx-translate/http-loader": "7.0.0",
    "@popperjs/core": "2.11.5",
    "@schematics/angular": "13.3.3",
    "@sweetalert2/theme-bootstrap-4": "5.0.10",
    "@swimlane/ngx-datatable": "^20.1.0",
    "ag-grid-angular": "27.2.0",
    "ag-grid-community": "27.2.0",
    "animate.css": "4.1.1",
    "blob-util": "^2.0.2",
    "bootstrap": "5.1.3",
    "browser-update": "^3.3.40",
    "buffer": "6.0.3",
    "classlist.js": "^1.1.20150312",
    "codemirror": "^5.65.9",
    "core-js": "^3.25.3",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.30.0",
    "date-fns-tz": "1.3.3",
    "easy-pie-chart": "2.1.7",
    "enhanced-resolve": "5.9.3",
    "file-saver": "^2.0.5",
    "flot": "^4.2.3",
    "flot-spline": "0.0.1",
    "font-awesome": "4.7.0",
    "fs-extra": "10.1.0",
    "fullcalendar": "5.11.0",
    "hammerjs": "^2.0.8",
    "ini": "^3.0.0",
    "intl": "^1.2.5",
    "jqcloud2": "2.0.3",
    "jquery": "^3.6.1",
    "jquery-slimscroll": "1.3.8",
    "jquery-sparkline": "2.4.0",
    "jquery-ui": "^1.12.1",
    "jquery.browser": "0.1.0",
    "jvectormap-next": "^3.1.1",
    "kind-of": "^6.0.3",
    "lodash": "^4.17.21",
    "material-icons": "^1.12.0",
    "modernizr": "^3.12.0",
    "ng2-file-upload": "1.4.0",
    "ng2-material-dropdown": "^1.0.0",
    "ng2-validation": "4.2.0",
    "ngx-bootstrap": "^10.3.0",
    "ngx-clipboard": "15.1.0",
    "ngx-color-picker": "15.0.0",
    "ngx-currency-mask": "4.3.2",
    "ngx-extended-pdf-viewer": "^15.0.5",
    "ngx-file-drop": "^13.0.0",
    "ngx-infinite-scroll": "^15.0.0",
    "ngx-mask": "^15.2.1",
    "ngx-quicklink": "^0.2.7",
    "ngx-select-ex": "8.0.1",
    "ngx-toastr": "15.2.2",
    "node-sass": "^8.0.0",
    "npm-force-resolutions": "0.0.10",
    "object-path": "^0.11.8",
    "path": "^0.12.7",
    "primeicons": "6.0.1",
    "primeng": "^15.4.1",
    "raw-loader": "^4.0.2",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.6.7",
    "screenfull": "6.0.1",
    "simple-line-icons": "2.5.5",
    "socket.io": "^4.5.2",
    "source-sans": "3.46.0",
    "spinkit": "2.0.1",
    "summernote": "^0.8.18",
    "summernote-cleaner": "^1.0.0",
    "sweetalert": "2.1.2",
    "sweetalert2": "11.4.8",
    "text-mask-addons": "^3.8.0",
    "ts-helpers": "1.1.2",
    "tslib": "^2.4.0",
    "web-animations-js": "^2.3.2",
    "xlsx": "0.18.5",
    "y18n": "^5.0.5",
    "yargs-parser": "21.0.1",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^15.0.0",
    "@angular-devkit/architect": "^0.1502.10",
    "@angular-devkit/build-angular": "15.2.10",
    "@angular-devkit/build-webpack": "^0.1502.10",
    "@angular-devkit/core": "^15.2.10",
    "@angular-devkit/schematics": "^15.2.10",
    "@angular-eslint/builder": "^15.2.1",
    "@angular-eslint/eslint-plugin": "15.2.1",
    "@angular-eslint/eslint-plugin-template": "15.2.1",
    "@angular-eslint/schematics": "15.2.1",
    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "^15.2.10",
    "@angular/compiler-cli": "15.2.10",
    "@angular/language-service": "15.2.10",
    "@babel/core": "7.17.9",
    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "7.16.7",
    "@compodoc/compodoc": "^1.1.15",
    "@types/codemirror": "5.60.5",
    "@types/jasmine": "4.0.3",
    "@types/jasminewd2": "2.0.10",
    "@types/jest": "^29.1.1",
    "@types/jquery": "^3.5.6",
    "@types/lodash": "4.14.182",
    "@types/node": "^20.8.3",
    "@types/summernote": "^0.8.7",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.28.0",
    "jasmine-core": "4.4.0",
    "jasmine-spec-reporter": "7.0.0",
    "jest": "^28.1.3",
    "loaders.css": "0.1.2",
    "markdown-it": "12.3.2",
    "mini-css-extract-plugin": "^2.6.0",
    "node-forge": "^1.3.1",
    "postcss": "^8.4.31",
    "postcss-loader": "^7.0.1",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "ts-jest": "^28.0.8",
    "ts-node": "10.7.0",
    "tslint": "^6.1.3",
    "typescript": "4.9.5",
    "webpack": "^5.74.0",
    "webpack-dev-server": "^4.11.1"
  },
  "peerDependencies": {
    "postcss": "^8.4.31"
  },
  "resolutions": {
    "node-forge": "1.3.1",
    "markdown-it": "12.3.2",
    "async": "3.2.3"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ],
  "optionalDependencies": {
    "bufferutil": "^4.0.1",
    "utf-8-validate": "^5.0.2"
  }
}

and angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng2angle": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": false,
            "optimization": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "namedChunks": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "allowedCommonJsDependencies": [
              "lodash",
              "jquery",
              "ng2-validation",
              "util",
              "rxjs",
              "jquery.browser",
              "xlsx",
              "file-saver",
              "core-js",
              "ngx-currency-mask",
              "rxjs-compat",
              "babel-runtime",
              "summernote",
              "summernote-cleaner",
              "date-fns-tz",
              "escape-string-regexp",
              "lodash.isequal"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/web.config",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/app/core/preloader/preloader.scss",
              "src/styles.scss",
              "node_modules/loaders.css/loaders.css",
              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/ngx-toastr/toastr.css",
              "node_modules/summernote/dist/summernote-lite.css",
              "node_modules/@swimlane/ngx-datatable/assets/icons.css",
              "node_modules/@swimlane/ngx-datatable/themes/material.css",
              "src/app/shared/styles/themes/theme-a.scss",
              "src/app/shared/styles/themes/theme-b.scss",
              "src/app/shared/styles/themes/theme-c.scss",
              "src/app/shared/styles/themes/theme-d.scss",
              "src/app/shared/styles/themes/theme-e.scss",
              "src/app/shared/styles/themes/theme-f.scss",
              "src/app/shared/styles/themes/theme-g.scss",
              "src/app/shared/styles/themes/theme-h.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "src/app/core/preloader/preloader.js",
              "node_modules/summernote/dist/summernote-lite.js",
              "node_modules/summernote-cleaner/summernote-cleaner.js"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/",
                "app/shared/styles/themes/theme-a.scss"
              ]
            }
          },
          "configurations": {
            "dgsDev": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "25kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "test": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "25kb"
                }
              ],
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            },
            "uat": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "25kb"
                }
              ],
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ]
            },
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "25kb"
                }
              ],
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.deploy.ts"
                }
              ]
            },
            "deploy": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "80kb"
                }
              ],
              "outputHashing": "all",
              "vendorChunk": false,
              "extractLicenses": false,
              "buildOptimizer": true,
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.deploy.ts"
                }
              ]
            },
            "es5": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "25kb"
                }
              ],
              "tsConfig": "src/tsconfig-es5.app.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng2angle:build"
          },
          "configurations": {
            "dgsDev": {
              "browserTarget": "ng2angle:build:dgsDev"
            },
            "test": {
              "browserTarget": "ng2angle:build:test"
            },
            "uat": {
              "browserTarget": "ng2angle:build:uat"
            },
            "production": {
              "browserTarget": "ng2angle:build:production"
            },
            "deploy": {
              "browserTarget": "ng2angle:build:deploy"
            },
            "es5": {
              "browserTarget": "ng2angle:build:es5"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng2angle:build"
          }
        },
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {},
          "configurations": {
            "es5": {
              "tsConfig": "src/tsconfig-es5.spec.json"
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    },
    "ng2angle-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ng2angle:serve"
          },
          "configurations": {
            "es5": {
              "devServerTarget": "ng2angle:serve:es5"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ]
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "style": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    },
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  },
  "cli": {
    "analytics": false
  }
}

Highly appreciate your help!!

Answer 1

First install the CSS and SCSS Loaders by using the below command:

npm install css-loader style-loader sass-loader --save-dev

then add the path in the angular.json file

{
  "styles": [
    "node_modules/@swimlane/ngx-datatable/assets/icons.css",
    "node_modules/@swimlane/ngx-datatable/themes/material.css",
    "src/app/shared/styles/themes/theme-a.scss",
    // ... your other styles
  ],
  // ... rest of the file
}

Answer 2

Can you please delete node_modules directory and package-lock.json file, then reinstall the modules.

rm -rf node_modules package-lock.json
npm install