Introduction

If you’ve installed Node.js and Angular on your Windows 11 machine, created a new Angular project using the ng new command, and encountered an error when trying to run ng serve, you’re not alone. This article will guide you through resolving the following error:

c:\working\projects\xxxxxxx\xxxxxx-site>ng serve
Error: Schema validation failed with the following errors:
  Data path "" must have required property 'browserTarget'.
Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Understanding the Error

This error typically occurs when there is a misconfiguration in your Angular project’s settings, particularly related to the angular.json file. The error message indicates that the browserTarget property, which is required for the Angular development server to work properly, is either missing or incorrectly configured.

Potential Causes

Based on the information provided, you’ve not edited any files after running the ng new command, which suggests that the issue may stem from one of the following:

• A problem with the default project configuration generated by Angular CLI.
• An issue with the angular.json file, specifically with the serve configuration.
• An incomplete or incorrect installation of Angular or related packages.

Steps to Resolve the Issue

1. Verify Your Angular CLI Version

Ensure that you are using a compatible version of Angular CLI. Run the following command to check:

ng version

Ensure that the CLI version matches the Angular version you’re using. In your case:

Angular CLI: 17.0.0
Angular: 17.0.2

If there’s a mismatch, try updating Angular CLI:

npm install -g @angular/[email protected]

2. Check the angular.json Configuration

Inspect your angular.json file and ensure the browserTarget property is correctly defined under the serve configuration. Here’s what it should look like:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "your-project-name:build:production"
    },
    "development": {
      "browserTarget": "your-project-name:build:development"
    }
  },
  "defaultConfiguration": "development"
}

Replace your-project-name with the actual name of your Angular project.

3. Ensure TypeScript Files Are Included

The error message also suggests that certain TypeScript files might not be included in your project. Ensure that your tsconfig.json file includes the necessary files and paths:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2020",
    "strict": true,
    "baseUrl": "./",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

4. Reinstall Node Modules

Sometimes, reinstalling your Node.js dependencies can resolve configuration issues. Try running:

rm -rf node_modules
npm install

5. Try Re-creating the Project

If the above steps don’t work, try creating a new Angular project from scratch to see if the problem persists:

ng new new-project-name
cd new-project-name
ng serve

If the new project works fine, the issue might be specific to the initial project configuration.

Conclusion

By following these steps, you should be able to resolve the Schema validation failed error and successfully run your Angular project on Windows 11. If you continue to experience issues, consider reaching out to the Angular community or seeking help from the project maintainers.