How to fix: Data path "" should have required property 'browserTarget' error in Angular 8 when running ng serve or npm start

Question

I'm trying to run either 'ng serve' or 'npm start' to run my angular 8 server on localhost:4200 in cmd on a windows machine. I get a Schema error I think I know where the problem is but no idea how to fix it.

Another point to note is this was working perfectly fine until windows restarted my computer to do an update.

I'm also running tailwind through a webpack.

The main part of the error is: Data path "" should have required property 'browserTarget'

"serve": {
   "builder": "@angular-builders/custom-webpack:dev-server",
   "options": {
      "customWebpackConfig": {
         "path": "./webpack.config.js"
       }
   }
},

I assume I need to add browserTarget in the options here, when I do that I get an error saying I need main in there too.

Am I on the right track? If I am, what are the values that should be attributed to these properties?

Any help would be greatly appreciated.

I've tried:

• Upgrading my packages.

• Upgrading Angular

• Deleting the node modules folder and npm installing

angular.json:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "bjjcastle": {
          "projectType": "application",
          "schematics": {
            "@schematics/angular:component": {
              "style": "scss"
            }
          },
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-builders/custom-webpack:browser",
              "options": {
                "customWebpackConfig": {
                  "path": "./webpack.config.js"
                }
              }
            },
            "serve": {
              "builder": "@angular-builders/custom-webpack:dev-server",
              "options": {
                "customWebpackConfig": {
                  "path": "./webpack.config.js"
                }
              }
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "bjjcastle:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.spec.json",
                "karmaConfig": "karma.conf.js",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.scss",
                  "node_modules/font-awesome/scss/font-awesome.scss"
                ],
                "scripts": []
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [
                  "tsconfig.app.json",
                  "tsconfig.spec.json",
                  "e2e/tsconfig.json"
                ],
                "exclude": [
                  "**/node_modules/**"
                ]
              }
            },
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "bjjcastle:serve"
              },
              "configurations": {
                "production": {
                  "devServerTarget": "bjjcastle:serve:production"
                }
              }
            }
          }
        }},
      "defaultProject": "bjjcastle"
    }

package.json:

    {
      "name": "bjjcastle",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~8.2.2",
        "@angular/common": "~8.2.2",
        "@angular/compiler": "~8.2.2",
        "@angular/core": "~8.2.2",
        "@angular/forms": "~8.2.2",
        "@angular/platform-browser": "~8.2.2",
        "@angular/platform-browser-dynamic": "~8.2.2",
        "@angular/router": "~8.2.2",
        "@fortawesome/angular-fontawesome": "^0.5.0",
        "@fortawesome/fontawesome-svg-core": "^1.2.21",
        "@fortawesome/free-brands-svg-icons": "^5.10.1",
        "@fortawesome/free-solid-svg-icons": "^5.10.1",
        "rxjs": "~6.5.2",
        "tslib": "^1.10.0",
        "zone.js": "~0.9.1"
      },
      "devDependencies": {
        "@angular-builders/custom-webpack": "^8.1.0",
        "@angular-devkit/build-angular": "~0.802.2",
        "@angular/cli": "~8.2.2",
        "@angular/compiler-cli": "~8.2.2",
        "@angular/language-service": "~8.2.2",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^3.0.0",
        "postcss-scss": "^2.0.0",
        "protractor": "~5.4.0",
        "tailwindcss": "^1.1.1",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.5.3"
      }
    }

webpack.config.js:

    module.exports = {
        module : {
          rules: [
            {
              test   : /\.scss$/,
              loader : 'postcss-loader',
              options: {
                ident  : 'postcss',
                syntax: 'postcss-scss',
                plugins: () => [
                  require('postcss-import'),
                  require('tailwindcss'),
                  require('autoprefixer'),
                ]
              }
            }
          ]
        }
      };

The Error I receive:

    Schema validation failed with the following errors:

      Data path "" should have required property 'browserTarget'.

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! [email protected] start: `ng serve`

    npm ERR! Exit status 1


    npm ERR!

    npm ERR! Failed at the [email protected] start script.

    npm ERR! This is probably not a problem with npm. There is likely additional 
    logging output above.

    npm ERR! A complete log of this run can be found in:

    npm ERR!     C:\Users\MyRoute\AppData\Roaming\npm-cache\_logs\2019-08-16T05_27_51_621Z-debug.log

Answer 1

I faced the same issue, updating angular/cli to the latest version helped in my case.

Type in the command line:

ng update @angular/cli

Answer 2

add browserTarget property in the options object

              "builder": "@angular-builders/custom-webpack:dev-server",
              "options": {
                "browserTarget": "bjjcastle:build",
                "customWebpackConfig": {
                  "path": "./webpack.config.js"
                }
              }
            },```

Answer 3

I faced the exact same issue and realized that I was doing npm i in the wrong directory. This happened because I was using an online IDE, and thus, the angular CLI was in the root directory, and my project's package.json in a subdirectory.

I had forgotten to do the npm i in the subdirectory