Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project)

Question

After migrating application from angular 5 to 6, on running ng serve the following errors pop up.

Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/src/workspace/workspace.js:210:42) at MergeMapSubscriber._tryNext (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27) at MergeMapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:55:18) at MergeMapSubscriber.Subscriber.next (/home/training/Attinad_Projects/TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at MergeMapSubscriber.notifyNext (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:84:26) at InnerSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/InnerSubscriber.js:25:21) at InnerSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at MapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/map.js:52:26) at MapSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at SwitchMapSubscriber.notifyNext (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:77:26)

I assume that the error is with .angular.json file which I re-named from .angular-cli.json .

My .angular.json file is as follows :

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "mediaweb"
    },
    "apps": [{
            "root": "src",
            "outDir": "dist/browser",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.scss",
                "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
                "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
                "../node_modules/video.js/dist/video-js.css"
            ],
            "scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/owl.carousel/dist/owl.carousel.js",
                "../node_modules/video.js/dist/ie8/videojs-ie8.js",
                "../node_modules/video.js/dist/video.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "platform": "server",
            "root": "src",
            "outDir": "dist/server",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.server.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.server.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [{
            "project": "src/tsconfig.app.json",
            "exclude": ["**/node_modules/**", "**/UI/**"]
        },
        {
            "project": "src/tsconfig.spec.json",
            "exclude": "**/node_modules/**"
        },
        {
            "project": "e2e/tsconfig.e2e.json",
            "exclude": "**/node_modules/**"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "component": {}
    }
}

Should I re-structure the json file, if so how?.

Any help would be great.

Babara

This is not angular.json structure, you something missed while upgrading.... create new fresh project and compare angular.json file. – Disaccustom

Answer 1

Since I fixed the issue I thought it would be nice to post it here.

I changed my file name .angular.json to angular.json and replaced some properties from the question in it.

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "template-appv6": {
      "root": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "template-appv6:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "template-appv6:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "template-appv6:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.css"
            ],
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }
      }
    },
    "template-appv6-e2e": {
      "root": "",
      "projectType": "application",
      "cli": {},
      "schematics": {},
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "template-appv6:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "cli": {},
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

I changed the file by replacing the angular.json file with properties in the angular official docs.

The official Angular Update Guide provides a step by step guide on how to update versions.

Babara

Answer 2

The issue is generally because of a version mismatch in your package.json file.

In my Angular 7 app, I have changed "@angular-devkit/build-angular": "^0.800.2" to "@angular-devkit/build-angular": "~0.7.0".

Then I ran the command npm install after deleting node_modules.

Aside: Use ^ carefully. Your working code may not work in the future if there is a major change in the package used.

Using the same package-lock.json file will also do the magic.

Knit

It also worked for me thanks. Any idea why it was not working with version 0.800.2? – Isoelectronic

I guess it's because of a major version mismatch – Knit

@Knit I've been following this and several other similar pieces of advice to correct version mismatch. Each version change I make just gives different errors. How does one get to the bottom of version mismatches? Isn't there something in the libraries that tells npm which versions to install? – Milanmilanese

The official document is itself clear. U can refer,angular.io/cli/update. Angular itself is providing update guides. I think it will be more helpful, update.angular.io – Knit

@mike_butak Try like this, Revery your code to the runnable stage. Then start updating the package one after the other. It will be easy to narrow down the issue. – Knit

@Knit Thanks, Deleting node_modules and running npm i fixed this for me. my issue was I have two branches, one of them have an updated angular version. – Bustee

@Knit Thanks . I have faced the issued in angular 17. Error Data path "" must have required property 'browserTarget'. After deleting the node_modules and running npm i. fixed my issue . – Mitrewort

Answer 3

my app is on angular 7.2.3

remove "es5BrowserSupport": true from angular.json. and npm start now works.

Pula

es5BrowserSupport at true is a very good idea to increase performances on the first load. Disabling it is not a solution... – Aristotle

you have to remove es5BrowserSupport, it is no more allowed to use this key within angular.json (Angular ^v10) – Erma

Answer 4

just go to the angular.json file and remove

"extractCss": true

on the

production section.

Tangram

Answer 5

When i was getting version error issues,Following command worked for me:

First run:

npm update

Second run:

ng update

Third run: (It will update all the mismatching packages)

npm update --all --force

Cowbind

ng update --all --force wth error Error: Unknown argument: all – Betook

ng update --all --force is a typo. This answer should be updated to npm update --all --force. – Umbrian

Answer 6

First:

npm uninstall @angular-devkit/build-angular

Next:

npm install @angular-devkit/[email protected]

Benzoin

Answer 7

Angular Upgrade from 9 to 10 is very easy (all additional detail-information is here: https://update.angular.io/?v=9.0-10.0) :

Make sure your package file is in version control and all changes have been committed. This will overwrite your package file. Better you try it in a new experimental branch.

npm install -g npm-check-updates
ncu -u
ng update --all --force

In the new schema, it is no longer allowed to use the key es5BrowserSupport; remove the following line in your angular.json:

"es5BrowserSupport": true

then simply start your application anew:

npm start

Erma

Answer 8

Change package.json from:

"@angular-devkit/build-angular": "^0.13.5",

to:

"@angular-devkit/build-angular": "^0.12.1",

Deth

Answer 9

the format of angular.json needs to be as per Angular6... You can check my angular.json below or create a new project in Angular6 and then check the format of the 'project' head

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "homePage6": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/homePage6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "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,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "homePage6:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "homePage6:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "homePage6: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": [
              "styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "homePage6-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "homePage6:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "homePage6"
}

I ran into similar (not identical, but also in angular.json) issue:

Schema validation failed with the following errors: Data path "['server']" should NOT have additional properties(scripts). Error: Schema validation failed with the following errors: Data path "['server']" should NOT have additional properties(scripts). at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (D:\Angular7\uHome\node_modules@angular-devkit\core\src\workspace\workspace.js:215:42) at MergeMapSubscriber._tryNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:69:27) at MergeMapSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:92:26) at InnerSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at MapSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\operators\map.js:55:26) at MapSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at SwitchMapSubscriber.notifyNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\switchMap.js:86:26)

had to remove the property scripts from my angular.json... sharing this information to help someone in the future.

Slavocracy

Thanks! This helped me; removing the property script solved my issue – Diplegia

Answer 10

When upgrading Angular from version 8 to 10 I got very similar error, namely Schema validation failed with the following errors: Data path "" should NOT have additional properties(serverTarget)..

The solution was remove all "serverTarget" references from below "serve". The below was wrong:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my_app:build"
    "serverTarget": "my_app:server"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production",
      "serverTarget": "my_app:server:production"
    }
  }
},

The below is correct and compiled successfully:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my_app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production"
    }
  }
},

Bonus for those who are working with Angular Universal. If you want to run SSR on localhost, then indeed you need the serverTarget. However, for that you have to create a new section within the angular.json, something like:

"serve-ssr": {
  "builder": "@nguniversal/builders:ssr-dev-server",
  "options": {
    "browserTarget": "my_app:build",
    "serverTarget": "my_app:server"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production",
      "serverTarget": "my_app:server:production"
    }
  }
},

Then ng run my_app:serve-ssr.

Actually I got this error when upgrading Angular from version 10 into 8 and wanted to improve some things. Then I've messed up the serverTarget thing with that wrong thinking, hopefully this will help out someone with Angular Universal in a project.

Rexrexana

Answer 11

I think it's with RxJS's incompatibility. You should install rxjs-compat to fix this.

npm install rxjs-compat

Also, the name of the file is angular.json and not .angular.json

Undine

installed rxjs-compat are re-run ng serve, the same issue persists. I used update.angular.io , this documentation to migrate. – Babara

Answer 12

Updating npm and angular fixed mine:

Assuming you use npm

npm update

then run:

ng update

NB: You might be prompted to update individual dependencies. In my case, I was prompted to run:

ng update @angular/cli and ng update @angular/core.

Marrissa

Answer 13

This error also shows when we add some properties that are not supported in the angular.json configuration

The Angular application we create must be listed under the projects properties (with a 's'), but in this case it is under project

The top level properties are listed here

Sophi

Answer 14

go to package.json and change the version of @angular-devkit/build-angular as follows:

@angular-devkit/build-angular": "^0.12.4"

Noisemaker

Answer 15

Remove these two lines from the angular.json file:

"vendorSourceMap":"true",
"evalSourceMap":"true".

Millenarianism

Answer 16

removing the flag es5BrowserSupport: true from angular.json fixed the problem.

Since I was updating from Angular7 to Angular11, I skipped a point from https://update.angular.io/ upgrade guide.

Remove any es5BrowserSupport flags in your angular.json and set your target to es2015 in your tsconfig.json. Angular now uses your browserslist to determine if an ES5 build is needed. ng update will migrate you automatically.

Micro

Answer 17

I just deleted the node_module folder and run

NPM Install

and it worked fine for me.

It is an Angular 9 solution.

Piquet

Answer 18

After trying everything that are written above, it still didn't work. Until, I rebooted my system. Add this to your last resort.

• Reboot system

Dustproof

Answer 19

just remove node_modules and do npm i sometimes some packages don't compile well, when you switch from one version to another version

Piave

Answer 20

please check your "angular/cli" version in "package.json", the version number must be similar to other angular packages.

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
     "@angular/cli": "~13.2.2", (this is the wrong one)
    "@angular/compiler-cli": "~8.2.14",

Scabious

Answer 21

In my project I was using a relative import in one of the files to another library outside the scope of ng-packagr (../another-lib). After changing to a module import (@scope/another-lib) it worked.

Aspirator

Answer 22

I just faced this issue, and it was because I added "basehref" in the angular.json section, which I think is not more supported, removed it, & it worked. & if anyone is troubled to add a root basehref into an angular app, you may need to do like below:-

1. import this <import {APP_BASE_HREF} from '@angular/common'> in app.module.ts
2. & then in the module array, add this as object into the list <{provide: APP_BASE_HREF, useValue: '/your-root-url/'}>

Melbourne

Answer 23

In my case in Angular 16 beta version, I added tsConfig to architect > build > options like this: "tsConfig": "src/tsconfig.app.json"
In most cases, the CLI added stuff like this but in my case, it wasn't there.

Illegalize

Answer 24

I also faced same issue with Angular 16 . after doing ng add @nguniversal/express-engine projectname fix the issue (ex.ng add @nguniversal/express-engine angularuniversalapp) initially i was trying ng add @nguniversal/express-engine clientProjectName project name so facing issue

Purplish

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sphery

Answer 25

I recently encountered this problem, I made a project with single-spa-angular, when creating the angular app itself it worked correctly, but when adding single-spa and single-spa-angular to the project it stopped working, I was installing versions of angular different but the error was not fixed, until I started to review the angular.json, and compared it with other projects that I have, I found that when installing single-spa, it made changes to this file, it had added another "main" in "build".

I solved it in the following way:

1. Remove "browser": "src/main.ts",

2. pass the main where we delete the browser

Emphasize that I had this problem because I installed single-spa, if you have not installed it, check that the main is not being referenced elsewhere, that is, it has to be within options

Doorstone