如何解决:在运行ng serve或npm start时,数据路径“”在Angular 8中应具有必需的属性“ browserTarget”错误

时间:2019-08-16 05:51:27

标签: angular

我正在尝试在Windows机器上以cmd在localhost:4200上运行'ng serve'或'npm start'来运行我的angular 8服务器。我收到架构错误,我想知道问题出在哪里,但不知道如何解决。

要注意的另一点是,在Windows重新启动计算机以进行更新之前,此方法运行良好。

我也在通过Webpack运行。

错误的主要部分是:数据路径“”应具有必需的属性“ browserTarget”

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

我认为我需要在此处的选项中添加browserTarget,当我这样做时,我收到一条错误消息,说我也需要main。

我走对了吗? 如果是,应归因于这些属性的值是什么?

任何帮助将不胜感激。

我尝试过:

  • 升级我的软件包。

  • 升级Angular

  • 删除节点模块文件夹并进行npm安装

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'),
                ]
              }
            }
          ]
        }
      };

我收到的错误:

    Schema validation failed with the following errors:

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

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! bjjcastle@0.0.0 start: `ng serve`

    npm ERR! Exit status 1


    npm ERR!

    npm ERR! Failed at the bjjcastle@0.0.0 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

3 个答案:

答案 0 :(得分:0)

在选项对象中添加browserTarget属性

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

答案 1 :(得分:0)

我遇到了同样的问题,将 angular/cli 更新到最新版本对我有帮助。

在命令行中输入:

ng 更新@angular/cli

答案 2 :(得分:0)

我遇到了完全相同的问题,并意识到我在错误的目录中执行了 npm i。发生这种情况是因为我使用的是在线 IDE,因此 angular CLI 位于根目录中,而我的项目的 package.json 位于子目录中。

我忘记执行子目录中的 npm i