Angular CLI version 9 (used to create Angular 9 projects) now picks up style
from schematics instead of styleext
. Use the command like this:
ng config schematics.@schematics/angular:component.style scss
and the resulting angular.json shall look like this
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
Other possible solutions & explanations:
To create a new project with angular CLI with sass support, try this:
ng new My_New_Project --style=scss
You can also use --style=sass
& if you don't know the difference, read this short & easy article and if you still don't know, just go with scss
& keep learning.
If you have an angular 5 project, use this command to update the config for your project.
ng set defaults.styleExt scss
For Latest Versions
For Angular 6 to set new style on existing project with CLI:
ng config schematics.@schematics/angular:component.styleext scss
Or Directly into angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
USEFUL:
Use the official Angular Update Guide select your current version and the version you wish to upgrade to for the relevant upgrade guide.
https://update.angular.io/
See GitHub repository Angular CLI diff for comparing Angular CLI changes.
https://github.com/cexbrayat/angular-cli-diff/
UPDATED 26/12/2018:
Use the official Angular Update Guide mentioned in the useful section above. It provides the most up to date information with links to other resources that may be useful during the upgrade.
UPDATED 08/05/2018:
Angular CLI 1.7 introduced ng update
.
ng update
A new Angular CLI command to help simplify keeping your projects up to date with the latest versions. Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes.
Configuration information for ng update can be found here
1.7 to 6 update
CLI 1.7 does not support an automatic v6 update. Manually install @angular/cli via your package manager, then run the update migration schematic to finish the process.
npm install @angular/cli@^6.0.0
ng update @angular/cli --migrate-only --from=1
UPDATED 30/04/2017:
1.0 Update
You should now follow the Angular CLI migration guide
UPDATED 04/03/2017:
RC Update
You should follow the Angular CLI RC migration guide
UPDATED 20/02/2017:
Please be aware 1.0.0-beta.32 has breaking changes and has removed ng init and ng update
The pull request here states the following:
BREAKING CHANGE: Removing the ng init & ng update commands because their current implementation causes more problems than it solves.
Update functionality will return to the CLI, until then manual updates
of applications will need done.
The angular-cli CHANGELOG.md states the following:
BREAKING CHANGES
- @angular/cli: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. Once
RC is released, we won't need to use those to update anymore as the
step will be as simple as installing the latest version of the CLI.
UPDATED 17/02/2017:
Angular-cli has now been added to the NPM @angular package. You should now replace the above command with the following -
Global package:
npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init
ORIGINAL ANSWER
You should follow the steps from the README.md on GitHub for updating angular via the angular-cli.
Here they are:
Updating angular-cli
To update angular-cli to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest
Local project package:
rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init
Running ng init
will check for changes in all the auto-generated files created by ng new and allow you to update yours. You are offered four choices for each changed file: y (overwrite), n (don't overwrite), d (show diff between your file and the updated file) and h (help).
Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after ng init finishes.
Best Solution
Using following commands to uninstall :
To verify: ng --version /* You will get the error message, then u have uninstalled */
Using following commands to re-install :
Notes : - Using --force for clean all the caches - On Windows run this using administrator - On Mac use sudo (
$ sudo <command>
)npm>5
you may need to use cache verify instead. ($ npm cache verify
)