failed to run Angular application getting error : Schema validation failed

Question

I am using Angular 7 for my Application and I am getting error while running it on development server .

I did ng serve

but I got error below

      D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1>ng lint -fix Your
     global Angular CLI version (7.3.9) is greater than your local version
     (7.1.4). The local Angular CLI version is used.

     To disable this warning use "ng config -g cli.warnings.versionMismatch
     false".

 Schema validation failed with the following errors:  
 Data path ".builders['app-shell']" should have required property 'class'.
     Error: Schema validation failed with the following errors:   
Data path ".builders['app-shell']" should have required property 'class'.
         at MergeMapSubscriber.project (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\@angular-devkit\core\src\workspace\workspace.js:215:42)
         at MergeMapSubscriber._tryNext (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\operators\mergeMap.js:69:27)
        at MergeMapSubscriber._next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\operators\mergeMap.js:59:18)
         at MergeMapSubscriber.Subscriber.next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\Subscriber.js:67:18)
         at MergeMapSubscriber.notifyNext (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
        at InnerSubscriber._next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
        at InnerSubscriber.Subscriber.next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\Subscriber.js:67:18)
         at MapSubscriber._next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\operators\map.js:55:26)
        at MapSubscriber.Subscriber.next (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\Subscriber.js:67:18)
        at SwitchMapSubscriber.notifyNext (D:\suman\ftoss\New TFS\FtossAngularWeb\Pre11WebV1\node_modules\rxjs\internal\operators\switchMap.js:86:26)

Details OF my Angular Application

Angular.json - >

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ftoss": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ftoss",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/manifest.json"
            ],
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/fonts/styles.css",
              "src/fonts/stylesheet.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.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": "4mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angularev-server",
          "options": {
            "browserTarget": "ftoss:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ftoss:buildroduction"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ftoss: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": ["/src/firebase-messaging-sw.js"],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ftoss-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angularrotractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ftosserve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ftosserveroduction"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ftoss"
}

What I tried - >

• I uninstalled npm from my project and again installed it , again I got same issue
• I did npm cache clear again I got same issue
• List item

Answer 1

This is due to npm audit fix installing a newer version of the @angular-devkit/build-angular package, specifically the 0.800.x versions, which has breaking changes from the 0.13.9 version. Thus, running the 0.800 version of this package breaks the angular-cli when used with Angular 7.

To fix this issue install the older stable package version with:

npm install --save-dev @angular-devkit/[email protected]

Answer 2

OK I did some testing and on my side (check out my comment in the question) it seems that the npm audit fix breaks the dependencies and causes ng serve to yield on that error. It seems to have to do with a dependency and I hope they'll fix it soon...

Answer 3

Even I ran into the same problem. As @Ardzii suggested the issue is with 'npm audit fix' command. I cloned a new repo and installed the node packages again without running the npm audit command and now it works fine.