I am getting error while running ionic project

Question

I want to run ionic project but getting error like below:
I have run command as ng serve --port=8100
this is my command prompt error:

` E:\IonicProj\Moodle IOS\Moodle>ng serve --port=8100 Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(stylePreprocessorOptions). E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\util\hostReportError.js:4 setTimeout(function () { throw err; }, 0); ^

SchemaValidationException [Error]: Schema validation failed with the following errors: Data path "" must NOT have additional properties(stylePreprocessorOptions). at MapSubscriber.project (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules@angular-devkit\architect\src\architect.js:42:27) at MapSubscriber._next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\operators\map.js:49:35) at MapSubscriber.Subscriber.next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\Subscriber.js:66:18) at SafeSubscriber.__tryOrUnsub (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular-devkit\core\node_modules\rxjs\internal\Subscriber.js:205:16) at SafeSubscriber.next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular-devkit\core\node_modules\rxjs\internal\Subscriber.js:143:22) at Subscriber._next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular-devkit\core\node_modules\rxjs\internal\Subscriber.js:89:26) at Subscriber.next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular-devkit\core\node_modules\rxjs\internal\Subscriber.js:66:18) at SafeSubscriber.__tryOrUnsub (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\Subscriber.js:205:16) at SafeSubscriber.next (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\Subscriber.js:143:22) at MergeMapSubscriber.notifyNext (E:\IonicProj\Moodle IOS\Moodle\node_modules@angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:93:26) { errors: [ { instancePath: '', schemaPath: '#/additionalProperties', keyword: 'additionalProperties', params: { additionalProperty: 'stylePreprocessorOptions' }, message: 'must NOT have additional properties' } ] } `

I have run command as "ionic serve". this is prints continuously line "[INFO] Waiting for connectivity with npm..."
This is my ionic info:

` Ionic:

Ionic CLI : 7.1.1 (C:\Users\user101\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.7.5 @angular-devkit/build-angular : 15.2.8 @angular-devkit/schematics : 15.2.8 @angular/cli : 15.2.8 @ionic/angular-toolkit : 6.0.0

Capacitor:

Capacitor CLI : 5.2.3 @capacitor/android : 5.2.3 @capacitor/core : 5.2.3 @capacitor/ios : not installed

Cordova:

Cordova CLI : 10.0.0 ([email protected]) Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

Android SDK Tools : 26.1.1 (C:\Users\itt-sooraj\AppData\Local\Android\Sdk) NodeJS : v16.14.2 (C:\Program Files\nodejs\node.exe) npm : 9.5.0 OS : Windows 10 `

This is my angular information:
` Angular CLI: 15.2.8 Node: 16.14.2 Package Manager: npm 9.5.0 OS: win32 x64

Angular: 15.2.8 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router ` | Package | Version | | -------------------------------|------------ | @angular-devkit/architect | 0.1101.2 | | @angular-devkit/build-angular | 15.2.8 | | @angular-devkit/core | 15.2.8 | | @angular-devkit/schematics | 15.2.8 | | @angular/language-service | 10.0.14 | | @schematics/angular | 15.2.8 | | rxjs | 7.4.0 | | typescript | 4.9.5 |

I have updated my ionic, npm and node versions.

I have tried lot's of command in command prompt but yet not not succeeded. I have run below commands : ionic serve ng serve --port=8100

but still can not run my code.

Here is my angular.json file

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/theme.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": {
                "scripts": false,
                "styles":{
                  "minify": false,
                  "inlineCritical": true
                  } 
              },
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true, 
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "50mb",
                  "maximumError": "100mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "disableHostCheck": true,
            "port": 8100
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
                "src/**/*.ts",
                "src/core/**/*.html",
                "src/addons/**/*.html"
            ]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit",
    "analytics": "7477caff-90f8-43b7-804c-487c01487e0b"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

Answer 1

I had this same problem with my project when first setting it up. In the first part of the error message it says you must not have stylePreprocessorOptions as an additional property. (See below)

` E:\IonicProj\Moodle IOS\Moodle>ng serve --port=8100 Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(stylePreprocessorOptions).

Search for stylePreprocessorOptions in your project and remove it from any files. It should just be in the angular.json if I remember correctly.