CODEWITHSUNDEEP
angular
Jokz
Jokz

Reputation: 560

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

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:

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

Upvotes: 32

Views: 70584

Answers (8)

Arsman Ahmad
Arsman Ahmad

Reputation: 2221

This worked for me!

After updating Angular version, I started to have the same issue on ng serve. To get the solution, I replaced all buildTarget with browserTarget in angular.json.

Upvotes: 1

commadelimited
commadelimited

Reputation: 5119

My app has been running flawlessly until just this morning. After googling and finding this post, I realized I could also just run npm ci to refresh existing dependencies without installing or updating them.

That did the trick for me.

Upvotes: 0

Akeel ahamed
Akeel ahamed

Reputation: 1037

For me it fixed by updating deprecated key from this buildTarget to this browserTarget in angular.json

Upvotes: 15

Sia
Sia

Reputation: 13

I faced the same exact issue. I wanted to run a project which was with Angular version 8 but it is outdated

As everyone mentioning Error typically occurs due to a misconfiguration in the angular.json file. If you already have browserTarget in the file then you need to make sure that the Angular CLI version installed globally on your machine is compatible with the version of Angular used in your project. I solved it by considering these:

Angular Packages: Updated all Angular-related packages (@angular/...) to version 12.2.13, which is a stable release in the Angular 12 series.

npm i @angular/[email protected] --force

TypeScript: Upgraded to TypeScript 4.2.4, compatible with Angular 12.

npm i [email protected] --force

Other Dependencies: Updated testing and tooling packages like Jasmine, Karma, etc., to versions compatible with Angular 12.

@types/node: Updated to match Node.js version 12 using nvm.

Upvotes: 0

Wellington Silva
Wellington Silva

Reputation: 27

I had same issue here.

The reason is that i was running a Docker Container as Sudo, so project files were created as Sudo.

I had to give permissions to the project folder (sudo chdmod -R 777 project_folder_name). Afterwards I ran npm install.

Everything working fine, now.

Upvotes: -1

Michal_S
Michal_S

Reputation: 239

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

Upvotes: 5

dkp1903
dkp1903

Reputation: 29

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

Upvotes: 2

Kaminto Anthony
Kaminto Anthony

Reputation: 147

add browserTarget property in the options object

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

Upvotes: 11

Related Questions