Angular 12 Data path "" must NOT have additional properties (styleext)

Question

What is wrong with the new version of Angular? Angular CLI 12.0.1 can't create new application. Tried to run ng new twelveApp and the cli complains dying Data path "" must NOT have additional properties (styleext).

I have tried to set the ng-new schema additionalProperties to true but the error remains.

How to get rid of this additional property?

PS: back to @angular/[email protected] everything works quite perfectly.

in case you are using angular13 Ref: stackoverflow.com/questions/70344098/… — Arun VC
– Arun VC, Commented Dec 31, 2021 at 3:05
@Arun VC Have the same issue but the problem is with "styleext" — Tee-Jay
– Tee-Jay, Commented Feb 6, 2022 at 20:30

QuanDar · Accepted Answer · 2021-10-06 10:58:27Z

69

Try to change

  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  },

to

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },

In angular.json. Let me know if this works.

answered Oct 6, 2021 at 10:58

QuanDar

1,4053 gold badges14 silver badges21 bronze badges

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

5 Comments

Raja Nagendra Kumar Over a year ago

This works great in angular 12, styleext works in angular 6.x

tufac2 Over a year ago

This is the right answer for >= Angular 12

David Seek Over a year ago

Wish this was my issue... My variable was already style

Wasif Khalil Over a year ago

im already on style :(

Pierre Over a year ago

works with Angular 13.x.x

mhusaini · Accepted Answer · 2021-05-25 20:39:00Z

27

Based on the answer to this issue, I edited .angular-config.json file in my home directory and removed the schematics section as shown below. Your particular case might require a variation of this solution.

{
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

answered May 25, 2021 at 20:39

mhusaini

1,25211 silver badges18 bronze badges

5 Comments

Kevin Oswaldo Over a year ago

Do this have any secondary effects on the project?

mhusaini Over a year ago

Not that I am aware of.

muxmuse Over a year ago

The section configures the behaviour of ng generate as documented here. Therein, the json schema is linked and doesn't contain a field styleext in the latest version.

Tee-Jay Over a year ago

None of these is working for me. I'm using angualr 13. Any ideas on how to get this rexolved?

Eliezer Berlin Over a year ago

Oh. It's the .angular-config.json in my HOME directory ( /users/Username/.angular-config.json ). I thought it was the angular.json of my project's directory.

Dominik Ehrenberg · Accepted Answer · 2021-08-06 14:02:12Z

14

styleext has been renamed to only style a while ago (see Farhans answer above), so maybe that's your issue

answered Aug 6, 2021 at 14:02

Dominik Ehrenberg

1,7681 gold badge17 silver badges15 bronze badges

1 Comment

Paul-Alexandre Naud Over a year ago

Thx, change the line "styleext :"sccs" for "style":"scss" works for me !

Mounir bkr · Accepted Answer · 2023-02-15 19:29:09Z

5

open file:

angular.json and change the

"styleext": "scss"

to: "style": "scss", like that:

answered Feb 15, 2023 at 19:29

Mounir bkr

1,82514 silver badges9 bronze badges

Comments

Coen Damen · Accepted Answer · 2022-01-13 10:35:54Z

1

in angular.json, remove this entry:

"extractCss": true,

This fixed my build in Angular: 13.1.2

answered Jan 13, 2022 at 10:35

Coen Damen

2,1095 gold badges32 silver badges51 bronze badges

Comments

aminben slimen · Accepted Answer · 2021-08-02 16:13:49Z

0

open your angular.json file
delete these lines of code (you might find them written twice )

"schematics": { "@schematics/angular:component": { "styleext": "scss" } },

answered Aug 2, 2021 at 16:13

aminben slimen

811 silver badge8 bronze badges

Comments

Mwiza · Accepted Answer · 2021-09-02 11:47:06Z

0

Edit your angular.json file (most likely located at the root of your project) and look for the schematics object. Remove the property styleext: "css" because it is not a valid property for your project.

Before edit

"@schematics/angular:directive": {
      "prefix": "app",
      "styleext": "css"
    }

After edit

"@schematics/angular:directive": {
      "prefix": "app"
    }

answered Sep 2, 2021 at 11:47

Mwiza

9,3593 gold badges53 silver badges44 bronze badges

Comments

Sandeep · Accepted Answer · 2022-09-30 03:47:14Z

0

I had to remove it from my global angular cli settings to get it working. You can see your global config using this command "ng config -g"

answered Sep 30, 2022 at 3:47

Sandeep

4614 silver badges11 bronze badges

Comments

Sarthak Maheshwari · Accepted Answer · 2024-05-20 20:16:45Z

0

While triggering the build (library build) using ng build, I too got this error. For me, it was a style: [] property in angular.json -> projects -> architect -> build -> options After removing style: [], I could see the library distribution (dist) folder generated. Hope this helps!

answered May 20, 2024 at 20:16

Sarthak Maheshwari

5494 silver badges10 bronze badges

Comments

Farhan Fauzi · Accepted Answer · 2021-07-19 14:38:09Z

-1

angular.json

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    },
    "@schematics/angular:application": {
      "strict": true
    }
  },

answered Jul 19, 2021 at 14:38

Farhan Fauzi

1

1 Comment

Azeame Over a year ago

Please use comments to explain why you are suggesting the changes your propose and/or how your suggestion solves the issue.

bad_coder · Accepted Answer · 2021-09-11 02:35:17Z

-1

Open this path C:\Users\yourUserNameOnWindows\.angular-config.json if your user is A you write: C:\Users\A\.angular-config.json it will open JSON file, delete this from the file:

{
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

edited Sep 11, 2021 at 2:35

bad_coder

13.2k20 gold badges59 silver badges94 bronze badges

answered Sep 11, 2021 at 1:42

LIGHT SPORT

1

Comments

Decoded · Accepted Answer · 2021-12-29 17:20:38Z

-1

In addition to the answer provided above by mhusaini, please check the angular.json file within your angular project. You'll see a structure similar to:

{
  "projects": {
    "your-angular-app": {
      ...
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
    }
  }
}

The solution variant required removing the content from within the schematics element.

answered Dec 29, 2021 at 17:20

Decoded

1,14513 silver badges18 bronze badges

Comments

Omar Hasan · Accepted Answer · 2021-05-31 04:40:08Z

-2

Open this path C:\Users\your user name

then you will find .angular-config.json

Kill it ;)

answered May 31, 2021 at 4:40

Omar Hasan

8269 silver badges18 bronze badges

1 Comment

serge Over a year ago

could you explain ?

prateek singhal · Accepted Answer · 2021-08-17 08:59:09Z

-3

"schematics": { "@schematics/angular:component": { "prefix": "app", // "styleext": "scss" // Change this to below value this works for me. "style": "scss"
},
"@schematics/angular:directive": { "prefix": "app" } },

answered Aug 17, 2021 at 8:59

prateek singhal

1

1 Comment

Tyler2P Over a year ago

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it

Collectives™ on Stack Overflow

Angular 12 Data path "" must NOT have additional properties (styleext)

14 Answers 14

5 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

5 Comments

5 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Linked

Related