Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project)

Question

将应用程序从 angular 5 迁移到 6 后，运行 ng 服务弹出以下错误。

Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project). at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/src/workspace/workspace.js:210:42) at MergeMapSubscriber._tryNext (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27) at MergeMapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:55:18) at MergeMapSubscriber.Subscriber.next (/home/training/Attinad_Projects/TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at MergeMapSubscriber.notifyNext (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:84:26) at InnerSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/InnerSubscriber.js:25:21) at InnerSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at MapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/map.js:52:26) at MapSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18) at SwitchMapSubscriber.notifyNext (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:77:26)

我认为错误出在我从 .angular-cli.json 重命名的 .angular.json 文件中。

我的.angular.json文件如下：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "mediaweb"
    },
    "apps": [{
            "root": "src",
            "outDir": "dist/browser",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.scss",
                "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
                "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
                "../node_modules/video.js/dist/video-js.css"
            ],
            "scripts": [
                "../node_modules/jquery/dist/jquery.js",
                "../node_modules/owl.carousel/dist/owl.carousel.js",
                "../node_modules/video.js/dist/ie8/videojs-ie8.js",
                "../node_modules/video.js/dist/video.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "platform": "server",
            "root": "src",
            "outDir": "dist/server",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.server.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.server.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.dev.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [{
            "project": "src/tsconfig.app.json",
            "exclude": ["**/node_modules/**", "**/UI/**"]
        },
        {
            "project": "src/tsconfig.spec.json",
            "exclude": "**/node_modules/**"
        },
        {
            "project": "e2e/tsconfig.e2e.json",
            "exclude": "**/node_modules/**"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "component": {}
    }
}

我是否应该重新构造 json 文件，如果是的话如何？

任何帮助都会很棒。

Answer 1

我认为是RxJS不兼容。你应该安装 rxjs-compat 来解决这个问题。

npm install rxjs-compat

此外，文件名是 angular.json 而不是 .angular.json

Answer 2

angular.json 的格式需要按照 Angular6...然后检查 'project' head

的格式

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "homePage6": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/homePage6",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "homePage6:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "homePage6:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "homePage6:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "homePage6-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "homePage6:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "homePage6"
}

我运行变成类似（不完全相同，但也在angular.json）的问题：

Schema validation failed with the following errors: Data path "['server']" should NOT have additional properties(scripts). Error: Schema validation failed with the following errors: Data path "['server']" should NOT have additional properties(scripts). at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (D:\Angular7\uHome\node_modules@angular-devkit\core\src\workspace\workspace.js:215:42) at MergeMapSubscriber._tryNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:69:27) at MergeMapSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\mergeMap.js:92:26) at InnerSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at MapSubscriber._next (D:\Angular7\uHome\node_modules\rxjs\internal\operators\map.js:55:26) at MapSubscriber.Subscriber.next (D:\Angular7\uHome\node_modules\rxjs\internal\Subscriber.js:67:18) at SwitchMapSubscriber.notifyNext (D:\Angular7\uHome\node_modules\rxjs\internal\operators\switchMap.js:86:26)

不得不从我的 angular.json 中删除 属性 脚本...共享此信息以帮助将来的人。

Answer 3

自从我解决了这个问题后，我认为在此处 post 会很好。

我将文件名 .angular.json 更改为 angular.json 并替换了其中问题的一些属性。

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "template-appv6": {
      "root": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              }
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "template-appv6:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "template-appv6:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "template-appv6:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.css"
            ],
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          }
        }
      }
    },
    "template-appv6-e2e": {
      "root": "",
      "projectType": "application",
      "cli": {},
      "schematics": {},
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "template-appv6:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "cli": {},
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

我通过用 angular 官方文档中的属性替换 angular.json 文件来更改文件。

官方Angular Update Guide提供了如何更新版本的分步指南。

Answer 4

更改 package.json 来自：

"@angular-devkit/build-angular": "^0.13.5",

至：

"@angular-devkit/build-angular": "^0.12.1",

Answer 5

更新 npm 和 angular 修复了我的问题：

假设您使用 npm

npm update

然后 运行:

ng update

注意：系统可能会提示您更新个别依赖项。就我而言，系统提示我 运行:

ng update @angular/cli 和 ng update @angular/core.

Answer 6

问题通常是因为您的 package.json 文件中的版本不匹配。

在我的 Angular 7 应用程序中，我已将 "@angular-devkit/build-angular": "^0.800.2" 更改为 "@angular-devkit/build-angular": "~0.7.0"。

然后我运行删除node_modules后的命令npm install。

旁白：请谨慎使用 ^。如果使用的包发生重大变化，您的工作代码将来可能无法工作。

Answer 7

我的应用程序在 angular 7.2.3

从 angular.json 中删除 "es5BrowserSupport"：正确。 npm start 现在可以使用了。

Answer 8

第一个：

npm uninstall @angular-devkit/build-angular

下一个：

npm install @angular-devkit/build-angular@0.12.4

Answer 9

转到package.json并更改@angular-devkit/build-angular的版本如下：

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

Answer 10

当我遇到版本错误问题时，以下命令对我有用：

第一个运行:

npm update

第二个运行:

ng update

第三个运行： （它将更新所有不匹配的包）

ng update --all --force

Answer 11

我刚刚删除了 node_module 文件夹和 运行

NPM Install

对我来说效果很好。

这是一个Angular9的解决方案。

Answer 12

Angular 从 9 升级到 10 非常容易（所有额外的 detail-information 都在这里：https://update.angular.io/?v=9.0-10.0）：

Make sure your package file is in version control and all changes have been committed. This will overwrite your package file. Better you try it in a new experimental branch.

npm install -g npm-check-updates
ncu -u
ng update --all --force

在新架构中，不再允许使用键es5BrowserSupport；删除 angular.json 中的以下行：

"es5BrowserSupport": true

然后只需重新启动您的应用程序即可：

npm start

Answer 13

将 Angular 从版本 8 升级到 10 时，我遇到了非常相似的错误，即 Schema validation failed with the following errors: Data path "" should NOT have additional properties(serverTarget)..

解决方案是删除 "serve" 下面的所有 "serverTarget" 引用。下面是错误的:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my_app:build"
    "serverTarget": "my_app:server"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production",
      "serverTarget": "my_app:server:production"
    }
  }
},

下面是正确并且编译成功:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my_app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production"
    }
  }
},

奖金 给与 Angular Universal 一起工作的人。如果你想在 localhost 上 运行 SSR，那么你确实需要 serverTarget。但是，为此您必须在 angular.json 中创建一个新部分，例如：

"serve-ssr": {
  "builder": "@nguniversal/builders:ssr-dev-server",
  "options": {
    "browserTarget": "my_app:build",
    "serverTarget": "my_app:server"
  },
  "configurations": {
    "production": {
      "browserTarget": "my_app:build:production",
      "serverTarget": "my_app:server:production"
    }
  }
},

然后ng run my_app:serve-ssr.

实际上我在将 Angular 从版本 10 升级到 8 时遇到了这个错误，我想改进一些东西。然后我用错误的想法搞砸了 serverTarget 的事情，希望这会帮助项目中有 Angular Universal 的人。

Answer 14

从 angular.json 文件中删除这两行：

"vendorSourceMap":"true",
"evalSourceMap":"true".

Answer 15

从 angular.json 中删除标志 es5BrowserSupport: true 解决了问题。

由于我是从 Angular7 更新到 Angular11，所以我跳过了 https://update.angular.io/ 升级指南中的一点。

删除任何 es5BrowserSupport flags in your angular.json 并设置您的 target to es2015 in your tsconfig.json。 Angular 现在使用您的浏览器列表来确定是否需要 ES5 构建。 ng update 会自动迁移你。

Answer 16

上面写的所有方法都试过了，还是不行。 直到，我重新启动了我的系统。 将此添加到您的最后一招。

• 重启系统

Answer 17

当我们添加一些 angular.json 配置中不支持的属性时也会出现此错误

我们创建的 Angular 应用程序必须列在 projects 属性下（带有 's'），但在本例中它位于 project

顶级属性已列出here

Answer 18

只需转到 angular.json 文件并删除

"extractCss": true

在

production section.

Answer 19

只需删除 node_modules 并执行 npm i 有时，当您从一个版本切换到另一个版本时，某些软件包无法正常编译

Answer 20

请检查“package.json”中的“angular/cli”版本，版本号必须与其他angular包相似。

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
     "@angular/cli": "~13.2.2", (this is the wrong one)
    "@angular/compiler-cli": "~8.2.14",

Answer 21

在我的项目中，我在其中一个文件中使用相对导入到 ng-packagr (../another-lib) 范围之外的另一个库。在更改为模块导入 (@scope/another-lib) 后它起作用了。