Troubleshooting problems with Angular CLI's serve and build commands

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "demoProject": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/hrms",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/main"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "node_modules/ion-rangeslider/css/ion.rangeSlider.css",
                            "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
                            "node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css",
                            "node_modules/ngx-toastr/toastr.css",
                            "src/styles.css",
                            "src/main.css"
                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
                            "node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"
                        ]
                    },
                    "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": "hrms:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "hrms:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "hrms: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": [
                            "src/styles.css"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        },
        "hrms-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "hrms:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "hrms:serve:production"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "hrms"
}

{
  "name": "demoProject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng build && node ./bin/www",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.2.0",
    "@angular/common": "^5.2.0",
    ...
                        
                        (Add all remaining dependencies here)
                        
     ...
                        
                        
                        
                        
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.2",
    "@angular/cli": "~6.0.5",
    ...
                        
                        (Add all dev dependencies here)
                        
     ...
}
  }

I encountered an error while trying to execute commands like ng build or ng serve. The error message mentions schema validation failure and missing property 'class' in the builders object. Here's the specific error:

Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. Error: Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/home/divx/Documents/projects/project_source_code/todoapplication/node_modules/@angular-devkit/core/src/workspace/workspace.js:173:42)

https://i.sstatic.net/yN1zf.png

angulartypescriptnpm

Answer №1

Have you made any recent updates to your Angular versions? It appears that the CLI is having trouble validating the schema in your angular.json file, which may have been altered with the latest release of Angular 8.

Could you provide a copy of your angular.json file or at least the schema section located at the top of the file?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with integrating Angular Cypress Component tests with Tailwindcss are causing problems

While implementing Tailwindcss in an Nx style monorepo structure with 'apps' and 'libs' folders, I configured the Tailwind file as follows: content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'], However, despi ...

angularcypresstailwind-csscypress-component-test-runner

The build error TS1036 is thrown when a function with a return statement is moved to index.d.ts, even though it worked perfectly in a standard TS file

In my project using Node v14.x and StencilJS (React) v2.3.x, I encountered an issue with a test-helper file containing a function that converts string-arrays to number-arrays: export function parseNumericStringOrStringArrayToIntegers(value: string | (strin ...

typescriptrxjstypescript-typingsstenciljsstencil-component

What is the process for testing ng-select in Angular using the testing library?

Below is a list of companies displayed in an ng-select: <div class="input-group"> <ng-select role="company" id="company" class="form-control" #Company formControlName="company"&g ...

angulartypescriptangular-testing-library

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

javascripthtmlcssangulartypescript

Angular's CDK presents an obstacle when attempting to dynamically create a draggable element

Whenever I try to modify the innerHTML of an element to include: <div cdkDrag>I should be draggable</div>, the div is not becoming draggable as expected. You can see an example here: https://stackblitz.com/edit/angular-material2-issue-d1kv8a. ...

htmlangulartypescriptdrag-and-dropangular-cdk

In order to work with the optionSelectionChanges property of the MdSelect directive in Angular Material2, it

Within my application, there is a Material2 select dropdown widget containing several options. app.component.html <md-select placeholder="Choose an option" [(ngModel)]="myOption" (optionSelectionChanges)="setOptionValue(myOption)"> &l ...

htmlangulardrop-down-menuangular-material2

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

As I work on developing an app with Angular, my current challenge involves a service that retrieves an Array of Data from an online source. My goal is to make this array accessible in other components but I'm facing difficulty in passing the data to t ...

javascriptarraysjsonangularhttp

How to transform a sentence string into an array of individual words using Ionic 2

I need to convert a string of words separated by new lines into an array called "words." aa aaa aaaa aaaaa In Java, I would do it like this: String s = "This is a sample sentence."; String[] words = s.split("\\s+"); for (int i = 0; i < word ...

javascripttypescriptionic-frameworkionic2ionic3

Encountering a hiccup while trying to build a React app using npx

Encountering an issue while attempting to create a new React app using npx. The command used is as follows: npx create-react-app store-app The process starts by creating a new React app in D:\Projects\ReactProjects\store-app. It proceeds to ...

reactjsnpmcreate-react-appnpx

There is no correlationId found within the realm of node.js

Currently, I am in the process of implementing correlationId functionality using express-correlation-id. I am diligently following the guidelines provided on this page: https://www.npmjs.com/package/express-correlation-id. I have successfully imported the ...

node.jstypescriptexpressmiddleware

Angular 4 animation issue: duration of transitions not being properly implemented

Why isn't the transition working as expected? Even though the animate function is set with a time of 2 seconds, the transition happens instantly. trigger('showMenu', [ state('active', style({ marginLeft: '0px' }) ...

animationtypescriptweb-deploymentangular

Leveraging TypeScript to Access Parameters in React Router

Currently, I am delving into the realm of TypeScript usage in my React projects and I have encountered a stumbling block when it comes to implementing React Router's useParams() feature. My import statement looks like this: import { useParams } from ...

javascriptreactjstypescriptreact-routerreact-hooks

Function overloading proving to be ineffective in dealing with this issue

Consider the code snippet below: interface ToArraySignature { (nodeList: NodeList): Array<Node> (collection: HTMLCollection): Array<Element> } const toArray: ToArraySignature = <ToArraySignature>(arrayLike: any) => { return []. ...

typescript

Sign up for an observable property that is initially empty

I'm currently working with rxjs in combination with Angular. Within my codebase, I have a class that includes a public property which is of type observable. Another class within the application needs to subscribe to this particular observable. The ...

angulartypescriptrxjs

Effectively handle multiple connections from nodejs to postgres using the pg library

I need to run a script that performs multiple queries using the pg library for managing connections. However, I am facing an issue where my program stops working when the connection pool is full and does not queue future queries. I have tried setting the p ...

javascriptnode.jspostgresqlnpmpg

Expanding Rows in a React Data Table: Utilizing Extra Props

Browsing through the documentation for React Data Table, it appears that there is a method to provide additional Props to an expandableRowsComponent. This is an excerpt from the documentation: expandableComponentProps With expandableComponentProps, you c ...

reactjstypescriptreact-data-table-component

What is the reason behind using `Partial<>` to enclose the Vue props?

I am currently working with a combination of technologies, and I am struggling to pinpoint the root cause of the issue. Here is the Tech Stack: Vue 3 TypeScript Vite VSCode / Volar unplugin-vue-macros (https://github.com/sxzz/vue-macros) unplugin-vue-com ...

typescriptvue.jsvuejs3volar

Tips for bundling a substantial Typescript framework using Webpack

In my endeavor to construct a TypeScript framework and bundle it using Webpack, I have encountered a perplexing issue. The problem lies in determining the appropriate "entry point" - setting it to all files results in only the final built file being access ...

typescriptnpmwebpack

Issues with getting Babel to work on a Windows computer while setting up the React-Starterify

Recently, I delved into learning the React framework and have been following tutorials on the LevelUpTuts YouTube channel. In video 7 of their React playlist, they demonstrated using a project called React-Starterify, which seemed straightforward when inst ...

node.jsreactjsnpmgulpbabeljs

What could be causing the `npm install` command to stall when using this particular `package.json` file?

Every time I attempt to execute npm install on this particular package.json, npm freezes and becomes completely unresponsive. { "name": "My Project", "description": "My Project", "version": "1.0.0", "private": true, "main": "server.js", "depe ...

node.jsnpmsocket.ionpm-install