ng serve giving error on newly created angular project

Question

On my Windows 11 machine, I have install nodejs and Angular. created a project with ng new command and then tried to run it with ng serve. It is giving me 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.

I have not edited any file after ng new command. Am I missing any step?

Angular CLI: 17.0.0
Node: 18.17.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

my serve setting on angular.js

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "SmartTrader:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "SmartTrader:build:production"
            },
            "development": {
              "buildTarget": "SmartTrader:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "SmartTrader:build"
          }
        },

I looking at https://angular.io/guide/setup-local my impression i didn't have to edit any files after doing ng new to run ng serve

Answer 1

The issue is probably coming from angular.json in your project, from the "serve:configurations" section of the angular.json

The browserTarget helps you to target your build configuration if it's development, production or staging

So go to the angular.json on ensure "serve:configuration" is available

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

locate the angular link for more clarity https://angular.io/guide/build#configure-target-specific-file-replacements

Answer 2

I had the exact same issue. Ran ng version and saw that @angular-devkit/build-angular was running on version 16.

Angular CLI: 17.0.0
Node: 18.17.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   16.2.10
@angular-devkit/schematics      17.0.0
@angular/cdk                    17.0.0
@angular/cli                    17.0.0
@angular/material               17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2

Running ng update @angular-devkit/[email protected] in the console solved my issue.