"ng g c" is not creating scss style extension unless specify "--styleext scss"

[ball6847]

ng g c is not creating scss style extension unless specify --styleext scss

Step to Reproduce

npm install -g @nrwl/schematics@latest # resolved to 6.0.2
create-nx-workspace awesome-nx-app --npm-scope awesome-nx-app
cd awesome-nx-app
ng g application main --routing --style scss
ng g component hello --project main --module app.module.ts

Output

CREATE apps/main/src/app/hello/hello.component.css (0 bytes)
CREATE apps/main/src/app/hello/hello.component.html (24 bytes)
CREATE apps/main/src/app/hello/hello.component.spec.ts (621 bytes)
CREATE apps/main/src/app/hello/hello.component.ts (276 bytes)
UPDATE apps/main/src/app/app.module.ts (552 bytes)

Let's try again with --styleext scss

ng g component hello2 --project main --module app.module.ts --styleext scss

Output

CREATE apps/main/src/app/hello2/hello2.component.scss (0 bytes)
CREATE apps/main/src/app/hello2/hello2.component.html (25 bytes)
CREATE apps/main/src/app/hello2/hello2.component.spec.ts (628 bytes)
CREATE apps/main/src/app/hello2/hello2.component.ts (281 bytes)
UPDATE apps/main/src/app/app.module.ts (630 bytes)

[cvgaviao]

FYI, there is an issue opened for this problem in the angular-cli github 11045

[Maden-maxi]

Add a configuration on top level your angular.json
It is looks like

[matheo]

The top level schematic doesn't work for me, neither the project level one.
It keeps creating the *.component.css :(
I updated @nrwl/schematics 6.1.0 and no joy either.

[sharathgg5]

this is much needed now.
is there a command to alter update or add to the default NX schematics collection?

[debuggerpk]

Here to report the bug as well.

[gkamperis]

This seems like a duplicate of
#158

Looks like Nx is not using the defaults set for angular schematics.

(Angular v6)
I.e.
ng config schematics.@schematics/angular:component.styleext scss

will set your angular schematics defaults but NOT the nx schematics.

you need to do this:
ng config schematics.@nrwl/schematics:component.styleext scss

then the components get the proper extension.

ideally nx should be looking at the @angular ones and using them.
if not then on migration of a project the values should be copied over and some documentation on this would not hurt either way.

[matheo]

@gkamperis thanks for your solution!
I had to fix the command to apply to the right schematics package:
ng config schematics.@nrwl/schematics:component.styleext scss

[goelinsights]

@matheo @gkamperis thanks to you both!

Hybrid answer for multiple settings if you don't want to use the CLI is to add them to the bottom of angular.json under the @nrwl/schematics rather than @schematics...I put them directly underneath defaultProject

  "schematics": {
    "@nrwl/schematics:component": {
      "styleext": "scss",
      "spec": true,
      "flat": true,
      "changeDetection": "OnPush",
      "prefix": "repo-name"
    }
  }

[dereklin]

@goelinsights Thanks very much for this. For me, I removed the prefix setting since each app might have different prefix:

"schematics": {
    "@nrwl/schematics:component": {
      "styleext": "scss",
      "spec": true,
      "flat": false,
      "changeDetection": "OnPush"
    }
  }

Does anyone know how to generate

public ngOnInit

instead of just

ngOnInit

?

[elishnevsky]

This issue hasn't been fixed yet, huh?

[goelinsights]

@elishnevsky it can probably be closed. I believe the schematics setup solved the issue.

[bcabanes]

Hi all!

This issue has already been addressed in #158, we created some documentation to explain a little bit more what is going on.
You can check here in the FAQ: https://github.com/nrwl/nx/wiki/FAQ#how-to-set-default-options-for-a-specific-schematic.

[virtuoushub]

For those coming here using nx8, and wondering why the above comment/wiki link does not work, try:

// angular.json(nx8)
"schematics": {
  "@nrwl/angular:component": {
    "styleext": "scss"
  }
},

See also: #1653

[viviramji]

Hi, for those who are using Angular 9, this works on my project.

On our angular.json file do this:

To fix it, open angular.json and search for styleext (it's in the schematics section). Rename styleext to style.

"schematics": {
    "@schematics/angular:component": {
      "style": "scss" // Changed from styleext to style
    }
  }

Explanation: This name has changed from styleext in version 8 to style in version 9 of Angular. However, the ng update command did not take account of this.

Taken from: https://stackoverflow.com/questions/60225919/after-update-from-angular-8-to-angular-9-ng-generate-component-generates-a-c

[AntonGrekov]

Hi, for those who are using Angular 9, this works on my project.

On our angular.json file do this:

To fix it, open angular.json and search for styleext (it's in the schematics section). Rename styleext to style.

"schematics": {
    "@schematics/angular:component": {
      "style": "scss" // Changed from styleext to style
    }
  }

Explanation: This name has changed from styleext in version 8 to style in version 9 of Angular. However, the ng update command did not take account of this.

Taken from: https://stackoverflow.com/questions/60225919/after-update-from-angular-8-to-angular-9-ng-generate-component-generates-a-c

Thank you, bro ! Finally made it for me

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.