Solution for "Schema Validation Failed" Error
The error message "Error: Schema validation failed with the following errors: data path "" must have required property 'browsertarget'." typically occurs when there's an issue with validating JSON data against a schema. This error indicates that the JSON data is missing a required property ('browsertarget' in this case) according to the specified schema.
Possible Causes:
- Missing or incorrect properties in the JSON data being validated.
- Schema definition mismatch where the schema expects a certain property but it's not present in the JSON data.
- Errors in the schema definition itself, such as typos or incorrect property names.
Solution:
- Review JSON Data: Check the JSON data being validated and ensure that it includes all the required properties specified by the schema. Make sure there are no typos or missing values.
- Verify Schema Definition: Review the schema definition and ensure that it accurately reflects the structure and requirements of the JSON data. Check for any discrepancies between the schema and the JSON data.
- Check Property Names: Pay close attention to property names in both the schema and the JSON data. Ensure that they match exactly, including case sensitivity.
- Use Schema Validators: Use JSON schema validators or online tools to validate both the JSON data and the schema. This can help identify any inconsistencies or errors in either the data or the schema.
- Debugging: If the error persists, use debugging techniques to inspect the JSON data and the schema during runtime. This can help pinpoint the exact location and cause of the validation failure.
- Consult Documentation: Refer to the documentation of the JSON schema specification or any specific schema validation libraries/frameworks you're using for additional guidance on troubleshooting schema validation errors.
After identifying and correcting any issues with the JSON data or schema definition, re-run the validation process to ensure that the error no longer occurs.
In package.json:
"@angular-devkit/build-angular": "^0.800.0" --> "@angular-devkit/build-angular": "^0.10.0"
Then:
- npm install
- ng serve
Specs:
- Angular CLI: 6.1.5
- Node: 10.15.3
- OS: win32 x64
- Angular: 6.1.9
What I did was to uninstall and install version "^0.13.0". I confirm and support the last answer. It worked for me as well. I uninstalled version "^0.800.0" and installed "^0.13.0". Rebuild your project, it will work fine.
Worked for me.
- npm uninstall @angular-devkit/build-angular
- npm install @angular-devkit/[email protected]
If we use
AVOID: npm audit fix -f
It may create a problem, so don't use it.
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.
While upgrading Angular from version 8 to 10, I encountered a very similar error, namely "Schema validation failed with the following errors: Data path "" should NOT have additional properties(serverTarget).."
The solution was to remove all "serverTarget" references from below "serve". The incorrect configuration looked like this:
"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 correct configuration, which compiled successfully, is as follows:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my_app:build"
},
"configurations": {
"production": {
"browserTarget": "my_app:build:production"
}
}
}
For those working with Angular Universal and needing to run SSR on localhost, you will indeed need the serverTarget. In such cases, create a new section within the angular.json file, like this:
"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 run ng run my_app:serve-ssr.
I encountered this error when upgrading Angular from version 10 to 8 and wanted to make some improvements. I mistakenly messed up the serverTarget configuration with the wrong thinking. Hopefully, this will help someone using Angular Universal in a project.
Read Similar Articles
- Entity Framework With Linq, inner Join, Group By, Order By Example
- [Fixed]-"fatal python error: init_fs_encoding: failed to get the python codec of the filesystem encoding"
- Water Geyser/Heater Wattage: Power Consumption and Wattage
- [Solved]-How to format Date Object in MM/DD/YYYY HH:MM:SS format using JavaScript ?
- [Fixed]- "an internal error occurred during: ""contacting software sites"". java.lang.nullpointerexception"
- [Fixed]:"the subscription does not have quotaid/feature required by sku 's0' from kind 'openai' or contains blocked quotaid/feature."
- Temporary Tables in Sql Server with Real Time example
