Angular-cli: Setting the default style on an existing project (bug)

Created on 11 Oct 2016 · 10Comments · Source: angular/angular-cli

I just created a new project and forgot to add --style scss to ng new newProject.

I tried to set the default style on that project using ng set defaults.styleExt scss and I got this error
Cannot read property 'serialize' of undefined

Source

MurhafSousli

👍2

Most helpful comment

Or: Temporaly solution (If you don't want reinstall.)

You can edit the file:
"_%PROJECT%\node_modules\angular-cli\models\json-schema\schema-tree_"
and replace the line 235 with:
serializer.property(key, function () { return serializer.outputValue(value[key])});

07Gond on 11 Oct 2016

👍2

All 10 comments

This has been fixed by f7bf0aa it should be pushed to npm in the next version meanwhile you can pull it directly from github using

npm install -g https://github.com/angular/angular-cli

RicardoVaranda on 11 Oct 2016

Same problem and error, but the solution did not work for me

moniuch on 11 Oct 2016

Make sure to uninstall the cli and clear npm cache before installing the updated version.

RicardoVaranda on 11 Oct 2016

Or: Temporaly solution (If you don't want reinstall.)

07Gond on 11 Oct 2016

👍2

Can we not just edit angular-cli.json and change:

  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }

to:

  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }

Or is it more complex than that?

harryjubb on 13 Oct 2016

I also noticed a possible newbie gotcha, in that you also need to change apps.styles to include styles.scss, assuming you're modifying your global styles.css to a styles.scss.

harryjubb on 13 Oct 2016

@harryjubb yes. Changing the property in angular-cli.json would work. You'd still have existing .css files unchanged and need to change them all yourself.

Another approach is running ng init with the correct parameters from ng new (for example: ng init --style=scss. This will generate all the default files again, and ask you whether you want to override them or not (offers to show a diff too).

This is how I upgrade my CLI project. I make sure all my files are committed in git, upgrade my global CLI, change CLI version in project's package.json, and then run ng init --style=scss, accept various files, and then run my Git UI commit dialog, undo lines I don't care about, and commit the good ones (usually they are only few files).

You will still have to delete the old .css files, and update all components (other than AppComponent) to point to .scss files.