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

just had the same error with a new project... weird... I think that I messed something up with `npm audit fix --force`... — Martin Carre, May 30 '19 at 13:35

score 14 · Answer 1 · answered Jun 05 '19 at 20:12

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/build-angular@0.13.9

score 7 · Accepted Answer · answered May 30 '19 at 13:50

7

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...

answered May 30 '19 at 13:50

Martin Carre

1,157
4
20
42

score 2 · Answer 3 · answered Jun 04 '19 at 08:42

2

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.

answered Jun 04 '19 at 08:42

Pawan

43
8

score 1 · Answer 4 · answered May 30 '19 at 05:25

1

I think its with the rxjs incompatibility. Try running this

npm install rxjs-compat

answered May 30 '19 at 05:25

Prashanth Damam

841
8
25

failed to run Angular application getting error : Schema validation failed

4 Answers4

Linked