get/set have been deprecated in favor of the config command

Question

Using angular-cli at the command line, I executed:

ng set defaults.styleExt styl

to set the default styling to Stylus and I got this response:

get/set have been deprecated in favor of the config command

I want to change the style extension on an EXISTING project to use SCSS. How do I do this using the config command? Where is the documentation for ng config?

I am using Angular CLI v6.0.0

ng help says:

config Get/set configuration values

but doesn't elaborate. Thanks

Answer 1

For Angular 6 you want to use the following command:

ng config schematics.@schematics/angular:component.styleext styl

This will automatically add the "schematics" section halfer mentioned to the angular.json file.

Here is the official documentation: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Answer 2

ng config projects.PROJECT_NAME.schematics.@schematics/angular:component '{ styleext: "scss"}'

for a specific project or for the default across all projects

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

Answer 3

OK I did a diff on a project generated with:

ng new --style=styl PROJECT_NAME

and the same without the --style flag and the differences in the angular.json config file are represented in the 2 .png files attached.

Using these diffs, I manually made the changes to angular.json as follows:

(1) Change projects.PROJECT_NAME.schematics as follows:

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

(2) Change projects.PROJECT_NAME.architect.build.options.styles as follows:

"styles": [                                                                                  
    "src/styles.styl"                                                                          
]

(3) Change projects.PROJECT_NAME.architect.test.options.styles as follows:

"styles": [                                                                                  
  "styles.styl"                                                                              
]                                                                                           

(4) Rename src/styles.css to src/styles.styl

Your existing components will happily continue to use .css but new components will now be generated with .styl files.

Diffs in PNG format as follows:

...