1

I cloned a git repo (Angular ver 11, Single SPA) to my local machine. The whole team needs to maintain the same version as in the package.json.

  1. First I executed the command npm install
  2. Then I gave npm run start

I am getting the below issue

Schema validation failed with the following errors: Data path "" should have required property 'browserTarget'.

Below is my package.json

{
  "name": "integration",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "npm run build:single-spa:integration",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "build:single-spa:integration": "ng build integration --prod --deploy-url http://localhost:4220/",
    "serve:single-spa:integration": "ng s --project integration --disable-host-check --port 4220 --live-reload false"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "11.0.5",
    "@angular/cdk": "11.2.4",
    "@angular/common": "11.0.5",
    "@angular/compiler": "11.0.5",
    "@angular/core": "11.0.5",
    "@angular/forms": "11.0.5",
    "@angular/platform-browser": "11.0.5",
    "@angular/platform-browser-dynamic": "11.0.5",
    "@angular/router": "11.0.5",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "guid-typescript": "1.0.9",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "primeicons": "4.1.0",
    "primeng": "11.3.0",
    "rxjs": "6.6.0",
    "single-spa": "5.3.4",
    "single-spa-angular": "4.9.2",
    "tslib": "2.0.0",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.1.0",
    "@angular-devkit/build-angular": "~0.1100.5",
    "@angular/cli": "~11.0.5",
    "@angular/compiler-cli": "~11.0.5",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^5.1.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

**Update **

Below is the angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "integration": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "integration",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "outputPath": "dist/integration",
            "index": "src/index.html",
            "main": "src/main.single-spa.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "customWebpackConfig": {
              "path": "extra-webpack.config.js",
              "libraryName": "integration",
              "libraryTarget": "umd"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1000mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "1000mb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "outputHashing": "none"
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "integration:build:production"
            },
            "development": {
              "browserTarget": "integration:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "integration: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.css"
            ],
            "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": "integration:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "integration:serve:production"
              }
            }
          }
        }
      }
    }
  },
  "defaultProject": "integration"
}

Please help me to resolve this issue

Edit - Additional Info

npm run build and ng test works fine with the same setup.

jAntoni
  • 591
  • 1
  • 12
  • 28

1 Answers1

0

You can try this one: https://stackoverflow.com/a/61080357/10832261 Since you cannot change versions in package.json, maybe node version could solve your issue: "check the Nodejs version support needed here: https://angular.io/guide/setup-local and check the installed version. If you are using the latest version of angular, you should be able to make it work with the latest version of Nodejs."

Maria K.
  • 219
  • 1
  • 8
  • Thanks for your reply. We are expected to use Angular 11. Am very new to Angular. If I change node version will it not impact the versions mentioned in the package.json? If so can you please help me do that? I couldn't understand from the link you've shared. – jAntoni Aug 25 '21 at 19:46
  • Which node version do you use? You can find this out by typing "node -v". You need 10.13.x/12.11.x or later minor. To manage node versions I'd recommend using nvm (https://github.com/nvm-sh/nvm) – Maria K. Aug 25 '21 at 19:56
  • Node version in my system is v14.16.0 Should I be changing the version? If so please guide me. – jAntoni Aug 25 '21 at 20:13
  • As I stated, it should be 10.13.x/12.11.x or later minor, so you probably need to downgrade. For this, try "nvm use ". – Maria K. Aug 25 '21 at 20:25