title: You may need an additional loader to handle the result of these loaders. Angular 14
body: <p>I updated from Angular 7 to Angular 14 after removing all the errors in my project this is the only error that is stopping me from compiling successfully. I am getting this error on ng serve:</p>
  <blockquote>
  <blockquote>
  <p>/src/app/shared/styles/themes/theme-f.scss:1:6 - Error: Module parse failed: Unexpected token (1: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.
  body, .wrapper &gt; section { |   background-color: #f5f7fa; |   color: #73879C;</p>
  </blockquote>
  </blockquote>
  <p>here is my tsconfig.json file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "compileOnSave": false,
    "compilerOptions": {
      "strictPropertyInitialization": false,
      "baseUrl": "./",
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "module": "es2020",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "importHelpers": true,
      "target": "es2019",
      "skipLibCheck": true,
      "typeRoots": [
        "node_modules/@types"
      ],
      "types": [ "googlemaps" ],
      "lib": [
        "es2018",
        "DOM",
        "DOM.Iterable",
        //"ScriptHost"
      ]
    },
    "angularCompilerOptions": {
      //"enableLegacyTemplate": true,
      //"enableI18nLegacyMessageIdFormat": false,
      "disableTypeScriptVersionCheck": true,
      "strictInjectionParameters": true,
      "strictInputAccessModifiers": true,
      "strictTemplates": true
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not op_mini all"
    ]
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This my package.json file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "wsi-portal",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "install": "npm run napa",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
      "postinstall": "node ./node_modules/protractor/bin/webdriver-manager update",
      "napa": "napa",
      "ng-high-memory": "node --max_old_space_size=16384 ./node_modules/@angular/cli/bin/ng"
    },
    "browser": {
      "child_process": false
    },
    "private": true,
    "napa": {
      "jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
      "ika.jvectormap": "kakirigi/ika.jvectormap",
      "flot": "flot/flot#v0.8.3"
    },
    "dependencies": {
      "@agm/core": "^1.0.0-beta.3",
      "@angular-devkit/build-webpack": "^0.1401.0",
      "@angular/animations": "~14.0.5",
      "@angular/cdk": "^14.0.4",
      "@angular/common": "~14.0.5",
      "@angular/compiler": "~14.0.5",
      "@angular/core": "~14.0.5",
      "@angular/forms": "~14.0.5",
      "@angular/material": "^14.0.4",
      "@angular/platform-browser": "~14.0.5",
      "@angular/platform-browser-dynamic": "~14.0.5",
      "@angular/router": "^14.0.5",
      "@fullcalendar/angular": "^5.11.0",
      "@fullcalendar/bootstrap": "^5.11.0",
      "@fullcalendar/core": "^5.11.0",
      "@fullcalendar/daygrid": "^5.11.0",
      "@fullcalendar/google-calendar": "^5.11.0",
      "@fullcalendar/interaction": "^5.11.0",
      "@fullcalendar/list": "^5.11.0",
      "@fullcalendar/luxon": "^5.11.0",
      "@fullcalendar/moment": "^5.11.0",
      "@fullcalendar/moment-timezone": "^5.11.0",
      "@fullcalendar/rrule": "^5.11.0",
      "@fullcalendar/timegrid": "^5.11.0",
      "@kolkov/angular-editor": "^2.1.0",
      "@ngx-translate/core": "^14.0.0",
      "@ngx-translate/http-loader": "^7.0.0",
      "@pascalhonegger/ng-datatable": "^14.0.0",
      "@types/angular": "^1.8.4",
      "angular-datatable2": "^0.9.31",
      "angular-datatables": "^14.0.0",
      "angular-date-value-accessor": "0.0.2",
      "angular-google-recaptcha": "^1.0.3",
      "angular-mgl-timeline": "^0.3.3",
      "angular-tabs-component": "^1.0.3",
      "angular-tree-component": "^8.0.1",
      "angular2-datatable-serverpagination": "^0.6.3",
      "angular2-text-mask": "^9.0.0",
      "angular2-toaster": "^7.0.0",
      "bootstrap": "^3.3.7",
      "chart.js": "^2.7.1",
      "codemirror": "^5.46.0",
      "easy-pie-chart": "^2.1.7",
      "font-awesome": "^4.7.0",
      "format-currency": "^1.0.0",
      "fullcalendar": "^5.11.0",
      "html2canvas": "1.0.0-rc.1",
      "https-proxy-agent": "^5.0.1",
      "jquery": "^3.4.1",
      "jquery-slimscroll": "^1.3.8",
      "jquery-sparkline": "^2.4.0",
      "jquery-ui": "^1.12.1",
      "jquery.browser": "^0.1.0",
      "jquery.flot.tooltip": "github:krzysu/flot.tooltip",
      "jspdf-autotable": "^3.1.1",
      "loaders.css": "0.1.2",
      "lodash": "^4.17.11",
      "mime": "^2.4.4",
      "moment": "^2.24.0",
      "ng-multiselect-dropdown": "^0.2.3",
      "ng-pick-datetime": "^7.0.0",
      "ng-select": "^1.0.2",
      "ng-zorro-antd": "^13.3.2",
      "ng2-alt-summernote": "^2.0.0",
      "ng2-charts": "^2.4.2",
      "ng2-ckeditor": "^1.3.3",
      "ng2-daterangepicker": "^3.0.1",
      "ng2-dnd": "^4.2.0",
      "ng2-file-upload": "^1.4.0",
      "ng2-pdf-viewer": "^9.0.0",
      "ng2-pdfjs-viewer": "^13.2.2",
      "ng2-progress-bar": "0.0.8",
      "ng2-select": "^2.0.0",
      "ng2-table": "^1.3.2",
      "ng2-validation": "^4.1.0",
      "ng4-click-outside": "^1.0.1",
      "ngx-bootstrap": "^8.0.0",
      "ngx-chips": "^1.9.8",
      "ngx-materialize": "^0.0.1",
      "ngx-modialog": "^5.0.1",
      "ngx-progress-bar": "^0.0.10",
      "node-sass": "^7.0.1",
      "npm-check-updates": "^14.1.1",
      "pdfmake": "^0.2.5",
      "popper": "^1.0.1",
      "popsicle-proxy-agent": "^3.0.0",
      "rxjs": "7.5.5",
      "rxjs-compat": "^6.6.7",
      "rxjs-observable": "^0.0.7",
      "screenfull": "^3.3.3",
      "simple-line-icons": "^2.4.1",
      "summernote": "^0.8.11",
      "sweetalert": "^1.1.3",
      "tslib": "^2.4.0",
      "typings": "^2.1.1",
      "web-animations-js": "^2.3.1",
      "zone.js": "~0.11.6"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "^14.0.5",
      "@angular/cli": "^14.0.5",
      "@angular/compiler-cli": "~14.0.5",
      "@angular/language-service": "~14.0.5",
      "@angular/localize": "^14.0.5",
      "@types/googlemaps": "^3.30.20",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "@types/jest": "^28.1.4",
      "@types/jquery": "^3.5.14",
      "@types/lodash": "^4.14.108",
      "@types/mocha": "^9.1.1",
      "@types/node": "^8.10.48",
      "codelyzer": "~4.5.0",
      "core-js": "^3.23.3",
      "husky": "^8.0.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "jspdf": "^1.5.3",
      "karma": "^6.4.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "napa": "^3.0.0",
      "protractor": "~7.0.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~4.7.4"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This is my angular.json file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "wsi-portal": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          }
        },
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/wsi-portal",
              "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/styles.scss",
                "node_modules/font-awesome/css/font-awesome.css",
                "node_modules/loaders.css/loaders.css",
                "node_modules/codemirror/lib/codemirror.css",
                "node_modules/summernote/dist/summernote.css",
                "node_modules/sweetalert/dist/sweetalert.css",
                "node_modules/simple-line-icons/css/simple-line-icons.css",
                "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                "node_modules/@fullcalendar/common/main.css",
                "node_modules/@fullcalendar/daygrid/main.css",
                "node_modules/@fullcalendar/timegrid/main.css",
                "node_modules/@fullcalendar/list/main.css"
  
              ],
              "scripts": [
                "node_modules/jquery/dist/jquery.js",
                "node_modules/jquery/dist/jquery.slim.min.js",
                "node_modules/bootstrap/dist/js/bootstrap.js",
                "node_modules/bootstrap/dist/js/bootstrap.min.js",
                "node_modules/flot/jquery.flot.js",
                "node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
                "node_modules/flot/jquery.flot.resize.js",
                "node_modules/flot/jquery.flot.pie.js",
                "node_modules/flot/jquery.flot.time.js",
                "node_modules/flot/jquery.flot.categories.js",
                "node_modules/jquery.flot.spline/jquery.flot.spline.js",
                "node_modules/jquery-sparkline/jquery.sparkline.js",
                "node_modules/easy-pie-chart/dist/easypiechart.js",
                "node_modules/chart.js/dist/Chart.bundle.js",
                "node_modules/bootstrap/js/modal.js",
                "node_modules/bootstrap/js/dropdown.js",
                "node_modules/bootstrap/js/tooltip.js",
                "node_modules/summernote/dist/summernote.js",
                "node_modules/sweetalert/dist/sweetalert.min.js",
                "node_modules/jquery-slimscroll/jquery.slimscroll.js"
              ]
              //,"es5BrowserSupport": true
            },
            "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": "30mb",
                    "maximumError": "30mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "6kb",
                    "maximumError": "10kb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "wsi-portal:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "wsi-portal:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "wsi-portal:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "karmaConfig": "src/karma.conf.js",
              "styles": [
                "src/styles.scss"
              ],
              "scripts": [],
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "wsi-portal-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "prefix": "",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "wsi-portal:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "wsi-portal:serve:production"
              }
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": "e2e/tsconfig.e2e.json",
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      }
    },
    "defaultProject": "wsi-portal"
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be appreciated!</p>