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
– Martin Carre, Commented May 30, 2019 at 13:35

Bradley Taniguchi · Accepted Answer · 2019-06-05 20:12:37Z

14

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]

answered Jun 5, 2019 at 20:12

Bradley Taniguchi

3912 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Carre · Accepted Answer · 2019-05-30 13:50:00Z

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, 2019 at 13:50

Martin Carre

1,2594 gold badges24 silver badges47 bronze badges

Comments

Pawan · Accepted Answer · 2019-06-04 08:42:30Z

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 4, 2019 at 8:42

Pawan

438 bronze badges

Comments

Prashanth Damam · Accepted Answer · 2019-05-30 05:25:25Z

1

I think its with the rxjs incompatibility. Try running this

npm install rxjs-compat

answered May 30, 2019 at 5:25

Prashanth Damam

9189 silver badges25 bronze badges

Collectives™ on Stack Overflow

failed to run Angular application getting error : Schema validation failed

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related