Simple fix to {Schema validation failed with the following errors: Data path "" must have required property 'browserTarget'} in Angular 17

Today I went to try Angular 17 with Material Angular and Tailwind. Nothing fancy. However I then got this error on my console when I'm trying to do ng serve:

Schema validation failed with the following errors: Data path "" must have required property 'browserTarget'

Naturally, I was confused and questioning where I went wrong 😵. These are what I did on the terminal before getting the error:

PS E:\Code> ng new atmedsphere
PS E:\Code> cd atmedsphere 
PS E:\Code\atmedsphere> ng add @angular/material
PS E:\Code\atmedsphere> npm install -D tailwindcss postcss autoprefixer; npx tailwindcss init
PS E:\Code\atmedsphere> npm audit
PS E:\Code\atmedsphere> npm audit fix --force
PS E:\Code\atmedsphere> ng serve

Pretty standard isn't it? I don't think I got anything wrong so then I look it up on Stackoverflow and GitHub issues. One term that got my attention was "Significantly older". It seems like there's a package in the package.json file that is significantly older compared to the Angular version in use.

I also try to look up the solution brought by @pinarella:

my app is on angular 7.2.3

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

However I was unable to find es5BrowserSupport in my Angular.json or package.json file.

So I started looking around a bit and was making a unique finding. Inside my package.json file, a dependency named "@angular-devkit/build-angular" that is suspiciously older than my Angular version (Angular 17).

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

full package.json file:

{
  "name": "atmedsphere",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:atmedsphere": "node dist/atmedsphere/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.5",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "autoprefixer": "^10.4.19",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "~5.4.2"
  }
}

Instinctively, I decided to try replacing it with the current Angular version number I was on as so:

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

Hence the full package.json file:

{
  "name": "atmedsphere",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:atmedsphere": "node dist/atmedsphere/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.5",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "autoprefixer": "^10.4.19",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "~5.4.2"
  }
}

And then I run npm update in the terminal. Honestly, it was not clear wether I should have been using npm update or ng update. So I went npm update anyway since I think the change I made is in package.json file that is accessed by npm.

The update went smooth and I was then able to do ng serve without any further issue. So yeah, if you are experiencing the same issue, try

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

in your package.json file.

Hope this helps!
Let's have further discussion in the comment and bye for now 👋👋