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/cli@11.0.5 everything works quite perfectly.

I created a [GitHub issue](https://github.com/angular/angular-cli/issues/20945) for this. — mhusaini, May 25 '21 at 19:58
in case you are using angular13 Ref: https://stackoverflow.com/questions/70344098/data-path-must-not-have-additional-propertiesextractcss-in-angular-13-while — Arun VC, Dec 31 '21 at 03:05
@Arun VC Have the same issue but the problem is with "styleext" — Tee-Jay, Feb 06 '22 at 20:30

score 65 · Answer 1 · answered Oct 06 '21 at 10:58

65

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 06 '21 at 10:58

QuanDar

1,255
2
12
20

This works great in angular 12, styleext works in angular 6.x – Raja Nagendra Kumar Oct 13 '21 at 14:43
This is the right answer for angular 12. Thanks! – diegodsp Nov 30 '21 at 21:09
This is the right answer for >= Angular 12 – tufac2 Dec 01 '21 at 11:52
Wish this was my issue... My variable was already `style` – David Seek Dec 22 '21 at 06:27
1

im already on style :( – Wasif Khalil Jan 06 '22 at 18:43
works with Angular 13.x.x – Pierre Feb 15 '22 at 04:53

score 27 · Accepted Answer · answered May 25 '21 at 20:39

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 '21 at 20:39

mhusaini

1,232
11
18

Do this have any secondary effects on the project? – Kevin Oswaldo Jul 22 '21 at 15:50
1

Not that I am aware of. – mhusaini Jul 25 '21 at 05:46
The section configures the behaviour of `ng generate` as documented [here](https://angular.io/guide/workspace-config#generation-schematics). Therein, the [json schema](https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/schema.json) is linked and doesn't contain a field `styleext` _in the latest version_. – muxmuse Dec 01 '21 at 05:58
1

None of these is working for me. I'm using angualr 13. Any ideas on how to get this rexolved? – Tee-Jay Feb 06 '22 at 17:29
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. – Eliezer Berlin Feb 07 '22 at 17:11

score 13 · Answer 3 · answered Aug 06 '21 at 14:02

13

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

answered Aug 06 '21 at 14:02

Dominik Ehrenberg

1,533
1
15
12

2

Thx, change the line "styleext :"sccs" for "style":"scss" works for me ! – Paul-Alexandre Naud Oct 11 '21 at 13:03

score 3 · Answer 4 · answered Feb 15 '23 at 19:29

3

open file:

angular.json and change the

"styleext": "scss"

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

answered Feb 15 '23 at 19:29

Mounir bkr

1,069
6
6

score 1 · Answer 5 · answered Jan 13 '22 at 10:35

1

in angular.json, remove this entry:

"extractCss": true,

This fixed my build in Angular: 13.1.2

answered Jan 13 '22 at 10:35

Coen Damen

2,009
5
29
51

score 0 · Answer 6 · answered Aug 02 '21 at 16:13

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 02 '21 at 16:13

aminben slimen

63
1
8

score 0 · Answer 7 · answered Sep 02 '21 at 11:47

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"
    }

score 0 · Answer 8 · answered Sep 30 '22 at 03:47

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 '22 at 03:47

Sandeep

441
4
11

score -1 · Answer 9 · answered Jul 19 '21 at 14:38

-1

angular.json

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

answered Jul 19 '21 at 14:38

Farhan Fauzi

1

4

Please use comments to explain why you are suggesting the changes your propose and/or how your suggestion solves the issue. – Azeame Jul 19 '21 at 22:29

score -1 · Answer 10 · edited Sep 11 '21 at 02:35

-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 '21 at 02:35

bad_coder

11,289
20
44
72

answered Sep 11 '21 at 01:42

LIGHT SPORT

1

score -1 · Answer 11 · answered Dec 29 '21 at 17:20

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.

score -2 · Answer 12 · answered May 31 '21 at 04:40

-2

Open this path C:\Users\your user name

then you will find .angular-config.json

Kill it ;)

answered May 31 '21 at 04:40

Omar Hasan

719
7
18

2

could you explain ? – serge Sep 14 '21 at 15:27

score -3 · Answer 13 · answered Aug 17 '21 at 08:59

-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 '21 at 08:59

prateek singhal

1

2

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 – Tyler2P Aug 18 '21 at 10:25

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

13 Answers13

Linked