Schema validation failed ".builders['app-shell']" should have required property 'class'

Ionic Framework
1

on “ionic serve”

Schema validation failed with the following errors:
Data path “.builders[‘app-shell’]” should have required property ‘class’.
[ERROR] ng has unexpectedly closed (exit code 1).
The Ionic CLI will exit. Please check any output above for error details.

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\coco\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.800.0
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview
2.2.3, (and 7 other plugins)

System:

NodeJS : v10.0.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

angular.json

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.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
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app: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": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}
2

to correct the error I had to come back package.json and package-lock.json to an earlier version

3

Good day lautarolorenz,

Can you please elaborate a bit feather on what you did on your package.json and package-lock,json

1 Like
4

I’m facing the same issue, what can I do to fix? What changes does the package.json require?

5

having the same problem any sol’s ??

6

I had the same issue which seems to have been caused by the @angular-devkit/build-angular node package as I have managed to resolve this issue by rolling back my back down from ^0.800.0 to ^0.12.4.

7 Likes
7

Hi! may you explain me how do you roll back and what did you do to solve please, regards!

8

after upgrading to Ionic 5 had this issue and downgrading solved the problem.

first un-install and then re-install with below command.

sudo npm uninstall @angular-devkit/build-angular

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

1 Like
9

Change

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

to

"@angular-devkit/build-angular": "^0.10.0",
2 Likes
10

Just followed this answer and got a warning
npm WARN deprecated istanbul@0.4.5: This module is no longer maintained, try this instead:
npm WARN deprecated npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.

I also got a different error on ionic serve,
[ng] Schema validation failed with the following errors:
[ng] Data path “” should NOT have additional properties(es5BrowserSupport).

Trying version ^0.12.0 installs 0.12.4, which also gives the above warning and error.

11

I can’t speak to this particular issue specifically, but in general I would suggest ignoring (especially old) recommendations that follow the pattern we see here:

  • OP posts an error emanating from the depths of libraries referenced by builders or framework, seemingly totally unrelated to any app-level code
  • Often accompanied by comments about “I just upgraded X and this started happening”
  • People talk about different versions of dependencies
  • You see excerpts of package.json
  • Somebody downgrades something and declares victory

Almost always these fall into three main categories, neither of which tend to age well at all:

A. There was a showstopper bug in a recently-released version of something upstream. These get fixed quickly, and so once they have been, you want the newer version instead.

B. OP went rogue and upgraded a dependency to something unsupported by the pillars of stuff that was current at the time. Also generally not relevant for long, as what was fresh and untested then becomes supported at some point.

C. OP has what I call a “frankenproject”, cobbled together from flotsam and jetsam of sketchy blog posts and the results of running things like npm update without understanding what is going on. Whatever specific incantation they found that appeared to help is unlikely to generalize to other situations.

So, what to do instead?

  • Update your tooling (e.g. ionic CLI and @angular/cli) to the latest stable release
  • Spawn a new project with ionic start
  • See if the problem persists there
  • Once you can build a new scratch project, start parachuting your app code into it and keep building from time to time
1 Like