从 Angular 8 升级到 Angular 9 的问题

Question

我正在按照 Angular's official updating guide 中的步骤操作，但是我遇到了一个问题，当我尝试查找它时并没有产生很多结果。

更新完成后，我看到了这个输出：

Your project has been updated to Angular version 9!
For more info, please see: https://v9.angular.io/guide/updating-to-version-9

当我运行 ng serve 时，我得到这个输出：

Schema validation failed with the following errors:
  Data path ".browserTarget" should match pattern "^[^:\s]+:[^:\s]+(:[^\s]+)?$".

在 angular.json 中，我的服务配置如下所示：

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "My Application:build"
      },

这是我在 package.json 中的依赖项和开发依赖项：

"dependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.12",
    "@angular-devkit/core": "^9.0.0-rc.12",
    "@angular/animations": "^9.0.0-rc.12",
    "@angular/cdk": "^9.0.0-rc.9",
    "@angular/cli": "^9.0.0-rc.12",
    "@angular/common": "^9.0.0-rc.12",
    "@angular/compiler": "^9.0.0-rc.12",
    "@angular/compiler-cli": "^9.0.0-rc.12",
    "@angular/core": "^9.0.0-rc.12",
    "@angular/flex-layout": "8.0.0-beta.27",
    "@angular/forms": "^9.0.0-rc.12",
    "@angular/material": "^9.0.0-rc.9",
    "@angular/material-moment-adapter": "^9.0.0-rc.9",
    "@angular/platform-browser": "^9.0.0-rc.12",
    "@angular/platform-browser-dynamic": "^9.0.0-rc.12",
    "@angular/platform-server": "^9.0.0-rc.12",
    "@angular/router": "^9.0.0-rc.12",
    "@angular/service-worker": "^9.0.0-rc.12",
    "@busacca/ng-pick-datetime": "^8.0.1",
    "@sentry/browser": "^5.4.0",
    "@types/stripe": "^6.25.8",
    "@w11k/ngx-componentdestroyed": "^4.1.4",
    "angular-mentions": "^0.9.1",
    "angular-token": "^7.0.1",
    "angular2-actioncable": "^6.0.2",
    "angular2-json2csv": "1.1.2",
    "angular2-jsonapi": "^7.0.0",
    "aws-sdk": "^2.493.0",
    "browser-image-compression": "^1.0.6",
    "calendar-utils": "0.0.7",
    "convert-keys": "^1.3.4",
    "core-js": "^2.4.1",
    "d3": "^4.13.0",
    "fs": "0.0.2",
    "immutable": "~3.8.2",
    "jshint": "^2.10.2",
    "jspdf": "~1.4.1",
    "jspdf-autotable": "~3.0.13",
    "libphonenumber-js": "^1.7.24",
    "lodash": "^4.17.13",
    "logrocket": "^0.6.20",
    "moment": "2.24.0",
    "net": "^1.0.2",
    "ng-intercom": "8.0.0",
    "ng-sidebar": "~9.1.1",
    "ng2-validation": "~4.2.0",
    "ngx-image-compress": "^8.0.3",
    "ngx-pipes": "~2.5.0",
    "randomvin": "0.0.1",
    "rxjs": "^6.5.4",
    "saturn-datepicker": "^7.4.0",
    "simple-web-notification": "^1.0.32",
    "tls": "0.0.1",
    "tslib": "^1.10.0",
    "typescript": "~3.7.5",
    "uuid": "~3.3.2",
    "vin-generator": "^1.0.1",
    "vin-validator": "^1.0.0",
    "vindec-validator": "^1.1.3",
    "weather-icons": "^1.3.2",
    "webpack": "^4.29.6",
    "xml2js": "^0.4.19",
    "yargs": "^13.2.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular/language-service": "^9.0.0-rc.12",
    "@sentry/webpack-plugin": "^1.6.2",
    "@types/jasmine": "^3.3.12",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "husky": "^3.0.9",
    "jasmine-core": "^3.3.0",
    "jasmine-marbles": "^0.4.1",
    "jasmine-reporters": "^2.3.2",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-parallel": "^0.3.1",
    "lint-staged": "^9.4.3",
    "ng-bullet": "^1.0.3",
    "prettier": "^1.19.1",
    "protractor": "^5.4.2",
    "protractor-screenshot-reporter": "0.0.5",
    "rxjs-tslint": "^0.1.7",
    "ts-node": "~8.0.3",
    "tslint": "^5.20.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-cyclic-dependency-checker": "0.0.1"
  },

我无法找到任何信息来说明为什么会发生这种情况。我希望在这里得到一些帮助！

Answer 1

尽量避免在应用程序名称上出现白色 space。在您的情况下，修改 serve.options.browserTarget 上的 My Application:build --> MyApplication:build 并重试。

Answer 2

从 angular.json 中的项目名称中删除空格，并更新对项目名称的所有引用。因此，将 "My Application" 到处替换为 "MyApplication"（仅使用对 javascript 中的标识符有效的字符，而 "space" 不是其中之一）。

...
  "projects": {
    "MyApplication": {
      "projectType": "application",

...

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

  "defaultProject": "MyApplication"

等...

从 Angular 8 升级到 Angular 9 的问题

Issues upgrading from Angular 8 to Angular 9

angular

npm

package.json

angular9