Errors: Data path ".builders['app-shell']" should have required property 'class'

Question

I am getting this error while running my application. Here are the details of my application.

Angular CLI: 7.3.3 
Node: 10.15.1 
Angular: 7.2.7 
@angular-devkit/architect -0.13.3 
@angular-devkit/build-angular- 0.800.1 
@angular-devkit/build-optimizer - 0.800.1 
@angular-devkit/build-webpack - 0.800.1 
@angular-devkit/core -7.3.3 
@angular-devkit/schematics -7.3.3 
@angular/cli -7.3.3 
@ngtools/webpack -8.0.1 
@schematics/angular -7.3.3 
@schematics/update 0.13.3 
rxjs 6.3.3 
typescript 3.2.4 
webpack 4.30.0

I have already tried cache clean.

Here is the detail of my application. Angular CLI: 7.3.3 Node: 10.15.1 Angular: 7.2.7 @angular-devkit/architect -0.13.3 @angular-devkit/build-angular- 0.800.1 @angular-devkit/build-optimizer - 0.800.1 @angular-devkit/build-webpack - 0.800.1 @angular-devkit/core -7.3.3 @angular-devkit/schematics -7.3.3 @angular/cli -7.3.3 @ngtools/webpack -8.0.1 @schematics/angular -7.3.3 @schematics/update 0.13.3 rxjs 6.3.3 typescript 3.2.4 webpack 4.30.0 — Ekta Gandhi
– Ekta Gandhi, Commented May 31, 2019 at 10:22
This issue is generally because of incompatible packages. Have you recently updated package.json? — Deepika
– Deepika, Commented May 31, 2019 at 11:44
Finally i found the solution. 1)Firstly eliminate all changes in package.json file by giving simple command git checkout package.json. 2)Then after make change in package.json in @angular-devkit/build-angular- ~0.800.1(Add tail instead of cap) 3)Then run command rm -rf node_modules/ 4)Then clean catch by giving command npm clean cache -f 5)And at last run command npm install. This works for me. — Ekta Gandhi
– Ekta Gandhi, Commented Jun 4, 2019 at 9:59
Above, npm clean cache -f is wrong, should be npm cache clean --force . — Fabien Haddadi
– Fabien Haddadi, Commented Aug 22, 2019 at 0:30
What I found is that I had set nvm to use the wrong version of node, needed to set that properly using nvm use 12.14.01 (in my case) — QuietSeditionist
– QuietSeditionist, Commented Feb 5, 2020 at 21:57

starball · Accepted Answer · 2022-12-25 22:24:05Z

193

In your package.json change the devkit builder.

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

to

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

it works for me.

edited Dec 25, 2022 at 22:24

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered May 31, 2019 at 14:42

idirene youcef

1,9851 gold badge9 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Dimuthu Over a year ago

Made it to @angular-devkit/build-angular": "0.13.4" and it worked.

SouravOrii Over a year ago

Perfect. Worked with "0.13.4", and running npm build afterwards

Alesh Houdek Over a year ago

Landed here because I got a notification about a security vulnerability detected in js-yaml < 3.13.1. After updating that I got this error message. Anyways, "^0.10.0" fixed it.

Indy-Jones Over a year ago

the 0.13.4 worked for me, however make sure you remove the node_modules folder first, delete the package-lock.json and then run npm install. seems to fix everything.

Francesco Borzi Over a year ago

This solution works but it's wrong, you should instead upgrade the angular and angular cli version. Check @ovangle answer below

|

abasar · Accepted Answer · 2019-06-11 08:21:01Z

121

Following worked for me

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/[email protected]

answered Jun 11, 2019 at 8:21

abasar

1,6781 gold badge13 silver badges8 bronze badges

2 Comments

Zakky Over a year ago

Although this answer is direct, it as well lacks resource or reference. Blindly directly people to install a particular package version may disrupt their entire project. Please be clear and provide some reference.

webjockey Over a year ago

npm install @angular-devkit/[email protected] worked

ovangle · Accepted Answer · 2019-07-23 12:06:56Z

87

Everyone here is focusing on downgrading @angular-devkit/build-angular to @angular 7.x versions for compatibility, but what they should be doing is to upgrade @angular/cli to angular 8 versions.

The problem is that the system cli is still stuck at an old version and isn't automatically updated by ng update (because it is outside the angular controlled project), so it is being left at an incompatible version when trying to access the angular libraries.

Downgrading @angular-devkit/build-angular just causes more incompatibilities.

npm i --global @angular/cli@latest

will fix the problem without breaking things elsewhere.

edited Jul 23, 2019 at 12:06

answered Jul 23, 2019 at 11:59

ovangle

2,0311 gold badge17 silver badges30 bronze badges

9 Comments

terahertz Over a year ago

This should be the answer. This error occurred to me because I pulled from a branch that has been updated to Angular 8 but my computer's angular is still Angular 7.

Xesenix Over a year ago

this issue can occur when you do npm audit fix on projects that are still on angular@7 so sometimes downgrading @angular-devkit/build-angular is the correct answer

Naren Over a year ago

running npm audit fix sometimes introduces braking changes. we should instead run npm audit to understand the findings and upgrade the package 1 by 1 using something like npm i --save-dev <package@version>

ovangle Over a year ago

@zhuhang That is just patently false. You can expect upgrading the global CLI to be backwards compatible with the last few versions, you cannot necessarily expect it to be forwards compatible.

zhuhang.jasper Over a year ago

@ovangle I did not mention forward compatible. I am saying people should not blindly upgrade or downgrade, especially the angular-cli version. One should identify their current CLI version and use the devkit that matches that CLI. If you want to upgrade devkit packages, then upgrading CLI altogether is correct.

|

zhuhang.jasper · Accepted Answer · 2019-11-26 04:02:24Z

82

Everyone is focusing on downgrading @angular-devkit/build-angular version to X, or upgrading @angular/cli version to Y or latest.

However, Please do not blindly suggest an X or Y or latest as answers. (Though usually, downgrading devkit should be better because upgrading CLI is a breaking change)

The correct version to choose, always depends on your Angular (angular-cli) version.

Angular CLI v8.3.19 -> 0.803.19
Angular CLI v8.3.17 -> 0.803.17
Angular CLI v7.3.8 -> 0.13.8
Angular CLI v6-lts -> 0.8.9

For other specific versions, visit: https://github.com/angular/angular-cli/tags. Find your CLI version, and in some tags, they do mention the corresponding versions for @angular-devkit/** packages.

Note: If you want to upgrade your CLI version, you should first consider upgrading to latest of your major version, do not simply jump to the next major version.

answered Nov 26, 2019 at 4:02

zhuhang.jasper

4,5744 gold badges23 silver badges33 bronze badges

5 Comments

Gregg L Over a year ago

Not sure why this answer was down-voted; it is good advice. In fact, it solved my problem (as I had upgraded my devkit/build-angular package to 0.803.x but left my Angular CLI at 7.3.x. Since I didn't intend to upgrade my Angular CLI, I went back to using ver 0.13.x of devkit

zhuhang.jasper Over a year ago

@GreggL In fact, my answer is better than the one with most upvotes. Other answers simply suggests to upgrade/downgrade BLINDLY. As my answer suggests, the correct CLI/ devkit version correlates, but no one gives a F, because that's how the dev community is.

Erhan Yaşar Over a year ago

You're a lifesaver, tx ! But do you have any idea for cli 7.0.6? It doesn't written there

m-a.D Over a year ago

To add to this great answer : In my own project, I include @angular/cli in the dev dependencies and I make sure it matches the @angular-devkit/build-angular. That way I can maintain multiple projects with multiple CLI version. If you do ng s it will use your computer CLI, if you do npm start (which is a script in package.json to do ng serve it will actually use the local CLI it launch this app with the right CLI. Hope this helps

massic80 Over a year ago

Updated for Angular 9, as of today (source NPM): 0.901.1 -> latest, 0.1000.0-next.0 -> next, 0.8.9 -> v6-lts, 0.803.26 -> v8-lts, 0.13.10 -> v7-lts

justForThisQuestion · Accepted Answer · 2019-06-03 13:10:19Z

29

Your @angular-devkit is incompatible with @angular/cli version, so just install older one like this for example:

npm install @angular-devkit/[email protected] @angular-devkit/[email protected]

answered Jun 3, 2019 at 13:10

justForThisQuestion

2912 silver badges2 bronze badges

2 Comments

Maartenw Over a year ago

Wanted to post the same one. Seen 0.12.4 floating around, but this doesn't work for me.

zhuhang.jasper Over a year ago

@M.Doe The correct version depends on your 1angular-cli` version. See this: stackoverflow.com/a/59043569/6122411

Raj Baral · Accepted Answer · 2020-03-12 08:34:25Z

26

Same issue after trying to upgrade to Ng8 which failed due to dependency issues.

npm uninstall @angular-devkit/build-angular

then I used,

npm install @angular-devkit/[email protected]

fixed it...

edited Mar 12, 2020 at 8:34

Raj Baral

7018 silver badges19 bronze badges

answered Jun 5, 2019 at 14:00

Alfa Bravo

2,0012 gold badges29 silver badges48 bronze badges

1 Comment

Tejashree Over a year ago

sometimes this solution is not feasible because it's version might not someone's requirement. Delete package lock json npm i @angular-devkit/build-angular

rrawat · Accepted Answer · 2019-10-25 14:42:27Z

16

I had the same problem, but I solved it thanks to the comment of Ekta Gandhi:

Finally i found the solution.

1) Firstly eliminate all changes in package.json file by giving simple command git checkout package.json.

2) Then after make change in package.json in @angular-devkit/build-angular- ~0.800.1(Add tail instead of cap)

3) Then run command rm -rf node_modules/

4) Then clean catch by giving command npm clean cache -f

5) And at last run command npm install. This works for me.

.... Along with the modification proposed by Dimuthu

Made it to @angular-devkit/build-angular": "0.13.4" and it worked.

edited Oct 25, 2019 at 14:42

rrawat

1,1472 gold badges15 silver badges29 bronze badges

answered Jun 21, 2019 at 21:45

Alejandro Araujo

4994 silver badges7 bronze badges

1 Comment

Ares Over a year ago

It should be noted that version "0.13.4" of @angular-devkit/build-angular has an issue when using lazy loaded components. To avoid that issue users need to update their @angular-devkit/build-angular package... So sort of a trade off here...

Max Rios · Accepted Answer · 2019-05-31 19:28:25Z

9

This happened to me when I installed Angular 8, there are some incompatibilities I couldn't solve. I had to downgrade because I went down the rabbit hole juggling around with every version until I found one that worked.

First, TypeScript was outdated, the default installation added a reference to TypeScript 3.1.6 and it requires 3.4 or greater.

npm install typescript@">=3.4 <3.5"

Second, using the devkit 0.800.1 or 0.800.1 always ended up in incompatibilities. I tried many combinations but I am not sure it's fully compatible yet, specially because I am using one bootstrap a bit older and I cannot upgrade yet.

Finally I tried to downgrade (go to package.json and find the devDependencies) until one of them worked.

@angular-devkit/build-angular": "0.13.4"

I am sure your problem is dependencies versions but I cannot tell you which one. Give it a try downgrading.

answered May 31, 2019 at 19:28

Max Rios

2,2562 gold badges21 silver badges37 bronze badges

3 Comments

Maartenw Over a year ago

Whilst it works, I would suggest @angular-devkit/build-angular": "0.13.8"as it seems to be the latest version that works

Max Rios Over a year ago

Thanks a lot. It seems by bootstrap version or dependencies don't let me go higher than 0.13.4 but it would work for many people

Dominik Szymański Over a year ago

With 0.13.8 (essentially anything lower than 0.800.*) I get:

An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:browser See "/tmp/ng-5iKcHN/angular-errors.log" for further details.

With latest version I get error from title. What to do now?

tony2tones · Accepted Answer · 2019-09-21 15:56:57Z

7

I was also coming across this issue and for me when doing more updates more issues occurred.

What worked for me in the end was more or less to remove angular cli and re install it with these steps:

npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli

this helped me out source: how to uninstall angular/cli

answered Sep 21, 2019 at 15:56

tony2tones

1,6801 gold badge19 silver badges21 bronze badges

Comments

SanjaySahu44 · Accepted Answer · 2020-04-06 20:55:56Z

2

I also faced this issue and struggled hours to solve it, I have tried all of the above options but nothing solved my problem. This issue occurs due to version mismatch of angular/cli and angular-devkit, so I did the following :

Manually changed version of files:

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

@angular/cli": "~7.0.3", //This is for Angular7, for Angular8 : 0.803.23
Deleted package-lock.json
Executed : npm install

It solved my problem.

answered Apr 6, 2020 at 20:55

SanjaySahu44

214 bronze badges

Comments

Bdwey · Accepted Answer · 2019-12-07 01:12:13Z

1

On my side it was package

@angular-devkit/build-angular

and

@angular-devkit/build-ng-packagr

was not the same version, Updating build-ng-packagr to same version as build-angular fixed my problem.

answered Dec 7, 2019 at 1:12

Bdwey

2,0332 gold badges17 silver badges19 bronze badges

Comments

Victor · Accepted Answer · 2020-02-08 06:42:01Z

1

If your moving to angular 8 or 9 this will do the trick

ng update @angular/cli

answered Feb 8, 2020 at 6:42

Victor

791 silver badge6 bronze badges

Comments

D. Schreier · Accepted Answer · 2020-06-27 11:02:30Z

0

You can simply audit your code and then

#sudo su 
rm -rf package-lock.json node_modules
sudo npm i --save

edited Jun 27, 2020 at 11:02

D. Schreier

1,7961 gold badge24 silver badges35 bronze badges

answered Jun 26, 2020 at 7:15

SUmit RUhela

1

Comments

yanioconjota · Accepted Answer · 2020-12-04 23:33:08Z

0

What actually worked for me was to update the application and its dependencies with:

ng update @angular/cli @angular/core

Angular documentation

answered Dec 4, 2020 at 23:33

yanioconjota

1141 silver badge6 bronze badges

Comments

Mohamad Alhamid · Accepted Answer · 2019-05-31 20:40:37Z

You have incompatibly dependencies i solved this problem by change the package.json form another project angular and then after change to this packag.json, you change only the dependencies versions you have.

after the change write:

-npm link

-npm serve -o

then it's work :)

   {
   "name": "angular-jwt-auth",
   "version": "0.0.0",
   "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
   "@angular/animations": "^7.1.4",
   "@angular/cdk": "^7.3.1",
   "@angular/common": "~7.1.0",
   "@angular/compiler": "~7.1.0",
   "@angular/core": "~7.1.0",
   "@angular/forms": "~7.1.0",
   "@angular/http": "^6.1.10",
   "@angular/material": "^7.3.1",
   "@angular/platform-browser": "~7.1.0",
   "@angular/platform-browser-dynamic": "~7.1.0",
   "@angular/router": "~7.1.0",
   "@ng-bootstrap/ng-bootstrap": "^4.2.0",
   "@types/jquery": "^3.3.29",
   "angular-6-datatable": "^0.8.0",
   "bootstrap": "^4.3.1",
   "chart.js": "^2.8.0",
   "core-js": "^2.5.4",
   "jquery": "^3.4.1",
   "rxjs": "~6.3.3",
   "zone.js": "~0.8.26"
    },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.11.0",
   "@angular/cli": "~7.1.0",
   "@angular/compiler-cli": "~7.1.0",
   "@angular/language-service": "~7.1.0",
   "@types/chart.js": "^2.7.53",
   "@types/jasmine": "^2.8.16",
   "@types/jasminewd2": "^2.0.6",
   "@types/node": "~8.9.4",
   "codelyzer": "~4.2.1",
   "jasmine-core": "~2.99.1",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~3.1.1",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "~2.0.1",
   "karma-jasmine": "~1.1.2",
   "karma-jasmine-html-reporter": "^0.2.2",
   "protractor": "~5.4.0",
   "ts-node": "~7.0.0",
   "tslint": "~5.11.0",
   "typescript": "~3.1.6"
   }

I have tried it and it give me same error errors: Data path "" should NOT have additional properties(es5BrowserSupport).

arielb · Accepted Answer · 2019-08-21 14:39:34Z

-1

I had this issue, this is how i have solved it. The problem mostly is that your Angular version is not supporting your Node.js version for the build. So the best solution is to upgrade your Node.js to the most current stable one.

For a clean upgrade of Node.js, i advise using n. if you are using Mac.

npm install -g n
npm cache clean -f
sudo n stable
npm update -g

and now check that you are updated:

node -v
npm -v

For more details, check this link: here

answered Aug 21, 2019 at 14:39

arielb

3903 silver badges12 bronze badges

3 Comments

arielb Over a year ago

Would be happy to know why i got this downvote. This is a clean answer, without trying to have some "workarounds"

zhuhang.jasper Over a year ago

because its not related to node version, it should be angular-cli version.

arielb Over a year ago

I just had this issue, i don't think it's the angular-cli version, it IS related to the angular-cli but it affected by the node version.

William Hou · Accepted Answer · 2020-01-23 18:45:39Z

NONE of the above-given answers works for me.

My original goal was to fix the sometimes CONSTANT COMPILING of my project with VSCode.

I tried many, many ways, but NOTHING was working -- the project just WON'T COMPILIE!

Finally I found out what the problem here is:

I cloned the project from my company's repository, and all the code from there HAS TO go exactly with the versions of dependencies when the existing part of the project was coded.

In the end, I deleted the previously cloned project AGAIN (quite a few times), and cloned AGAIN (also a few times), and DID NOTHING BUT RAN "npm install", and everything started to work.

The lesson I learned here is that:

Sometimes you'll make the situation worse when you try to fix some problems (the one I had was the CONSTANT COMPILING of my project).

But it doesn't mean we cannot try to fix the problems. We can. But when everything becomes a mess, we'd better go with the original code.

Fortunately the CONSTANT COMPILING of my project happens only once a while, not all the time. It's not fixed, but I have to bear with it, otherwise my project won't even compile.

ahmeturhan · Accepted Answer · 2019-07-06 10:41:48Z

-2

it's work reinstall @angular-devkit/[email protected]

npm install @angular-devkit/[email protected] --save-dev

answered Jul 6, 2019 at 10:41

ahmeturhan

572 silver badges5 bronze badges

Collectives™ on Stack Overflow

Errors: Data path ".builders['app-shell']" should have required property 'class'

18 Answers 18

11 Comments

2 Comments

9 Comments

5 Comments

2 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

11 Comments

2 Comments

9 Comments

5 Comments

2 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related