Setting the default style on an existing project (bug)

[MurhafSousli]

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

[RicardoVaranda]

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

[moniuch]

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

[RicardoVaranda]

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

[07Gond]

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])});

[harryjubb]

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]

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.

[Meligy]

@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.

[moniuch]

Thanks @Meligy for your explanation - I think it should be quoted in angular-cli docs/wiki one day!

[filipesilva]

Dupe of #2614

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}