Menu
I am using Angular v10 and I have a problem when startingmy .net core / Angular app.
Ive been trying to search for a solution / even upgrading everything to the latest version and it still does not work.
When I ran ng build --watch it does not finishes with any error but when I start my app from visual studio I end up with such errors in the browser:
Un unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Schema validation failed with the following errors:
Data path "" should NOT have additional properties(allowedCommonJsDependencies).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `ng serve --open "--port" "53931"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
))
System.Threading.Tasks.Task.ThrowIfExceptional(bool includeTaskCanceledExceptions)
InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Schema validation failed with the following errors:
Data path "" should NOT have additional properties(allowedCommonJsDependencies).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `ng serve --open "--port" "53931"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
My config is:
{
"name": "fuse",
"version": "10.0.0",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open",
"build": "ng build",
"build:prod": "ng build --prod",
"build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "3.0.0-beta.0",
"@angular-devkit/build-angular": "0.1000.7",
"@angular/animations": "10.0.9",
"@angular/cdk": "10.1.3",
"@angular/common": "10.0.9",
"@angular/compiler": "10.0.9",
"@angular/core": "10.0.9",
"@angular/flex-layout": "10.0.0-beta.32",
"@angular/forms": "10.0.9",
"@angular/material": "10.1.3",
"@angular/material-moment-adapter": "10.1.3",
"@angular/platform-browser": "10.0.9",
"@angular/platform-browser-dynamic": "10.0.9",
"@angular/router": "10.0.9",
"@ngrx/effects": "10.0.0",
"@ngrx/router-store": "10.0.0",
"@ngrx/store": "10.0.0",
"@ngrx/store-devtools": "10.0.0",
"@ngx-translate/core": "13.0.0",
"@swimlane/dragula": "3.8.0",
"@swimlane/ngx-charts": "14.0.0",
"@swimlane/ngx-datatable": "17.1.0",
"@swimlane/ngx-dnd": "8.2.0",
"@types/prismjs": "1.16.1",
"angular-calendar": "0.28.16",
"angular-in-memory-web-api": "0.11.0",
"chart.js": "2.9.3",
"chokidar": "3.4.2",
"classlist.js": "1.1.20150312",
"d3": "5.16.0",
"date-fns": "2.15.0",
"devextreme": "20.1.6",
"devextreme-angular": "20.1.6",
"devextreme-cldr-data": "^1.0.2",
"devextreme-schematics": "^1.0.12",
"lodash": "4.17.19",
"moment": "2.27.0",
"ng2-charts": "2.3.3",
"ngrx-store-freeze": "0.2.4",
"ngx-color-picker": "10.0.1",
"ngx-cookie-service": "10.0.1",
"perfect-scrollbar": "1.5.0",
"prismjs": "1.21.0",
"rxjs": "6.6.2",
"tslib": "^2.0.0",
"web-animations-js": "2.3.2",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular/cli": "10.0.5",
"@angular/compiler-cli": "10.0.9",
"@angular/language-service": "10.0.9",
"@types/googlemaps": "3.39.12",
"@types/jasmine": "3.5.12",
"@types/jasminewd2": "2.0.8",
"@types/lodash": "4.14.159",
"@types/node": "14.0.27",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "8.10.2",
"tslint": "~6.1.0",
"typescript": "3.9.7",
"webpack-bundle-analyzer": "3.8.0"
}
}
My angular config is:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fuse": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/fuse",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/app/main/angular-material-elements"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"src/styles.scss"
],
"scripts": [],
"showCircularDependencies": false,
"allowedCommonJsDependencies": [
"lodash",
"@swimlane/dragula",
"chart.js",
"angular-calendar",
"calendar-utils/date-adapters/date-fns",
"contra/emitter",
"crossvent",
"dom-plane",
"dom-set",
"@mattlewis92/dom-autoscroller",
"devextreme",
"devextreme-angular"
]
},
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"ec": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"sourceMap": true,
"extractCss": true
},
"hmr": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "fuse:build",
"allowedCommonJsDependencies": [
"lodash"
]
},
"configurations": {
"production": {
"browserTarget": "fuse:build:production"
},
"hmr": {
"hmr": true,
"browserTarget": "fuse:build:hmr"
},
"ec": {
"browserTarget": "fuse:build:ec"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "fuse: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.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**",
"**/src/app/fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "fuse:serve"
},
"configurations": {
"production": {
"devServerTarget": "fuse:serve:production"
}
}
}
}
}
},
"defaultProject": "fuse"
}
749
... Data path "" should NOT have additional properties (browserTarget). Found this when searching for this error. Just for reference for people who run into the same error in the future: I forgot to replace the default builder (@angular-devkit/build-angular) with @angular-builders/custom-webpack
After a successful upgrade, while preparing a build, it gives the following error. Data path "should NOT have additional properties (extracts). Option 1. Just remove the "extractCss": true from your production environment, it will resolve the problem. The reason for it is extractCss is deprecated, and its value is true by default.
[ng] Data path "" should NOT have additional properties (es5BrowserSupport). [ERROR] ng has unexpectedly closed (exit code 1). Sorry, something went wrong. For anyone having this problem while updating Ionic from 3 to 4: I had to remove "es5BrowserSupport": true from angular.json
I had the same issue. I solved it by updating "@angular-builders/custom-webpack"
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
