Issues upgrading from Angular 8 to Angular 9

Question

I'm following the steps in Angular's official updating guide, but am experiencing an issue that doesn't yield many results when I try to look it up.

After the update completes, I see this output:

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

When I run ng serve, I get this output:

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

In angular.json, my serve configuration looks like this:

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

Here are my dependencies and devDependencies in 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"
  },

I haven't been able to find any information on why this is happening. I'd love some help here!

Answer 1

Remove spaces from your project name in angular.json, and update all references to the project name. So replace "My Application" everywhere with "MyApplication" (only use characters that a valid for identifiers in javascript, and "space" isn't one of them).

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

...

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

  "defaultProject": "MyApplication"

etc...

Answer 2

Try to avoid the white space on the application name. In your case modify the My Application:build --> MyApplication:build on the serve.options.browserTarget and try again.