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"
}
}
Update February 2020
Since this answer got a lot of traction, I thought it would be best to update it with newer Angular optimizations:
- As another answerer said,
ng build --prod --build-optimizer
is a good option for people using less than Angular v5. For newer versions, this is done by default with ng build --prod
- Another option is to use module chunking/lazy loading to better split your application into smaller chunks
- Ivy rendering engine comes by default in Angular 9, it offers better bundle sizes
- Make sure your 3rd party deps are tree shakeable. If you're not using Rxjs v6 yet, you should be.
- If all else fails, use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules
- Check if you files are gzipped
Some claims that using AOT compilation can reduce the vendor bundle size to 250kb. However, in BlackHoleGalaxy's example, he uses AOT compilation and is still left with a vendor bundle size of 2.75MB with ng build --prod --aot
, 10x larger than the supposed 250kb. This is not out of the norm for angular2 applications, even if you are using v4.0. 2.75MB is still too large for anyone who really cares about performance, especially on a mobile device.
There are a few things you can do to help the performance of your application:
1) AOT & Tree Shaking (angular-cli does this out of the box). With Angular 9 AOT is by default on prod and dev environment.
2) Using Angular Universal A.K.A. server-side rendering (not in cli)
3) Web Workers (again, not in cli, but a very requested feature)
see: https://github.com/angular/angular-cli/issues/2305
4) Service Workers
see: https://github.com/angular/angular-cli/issues/4006
You may not need all of these in a single application, but these are some of the options that are currently present for optimizing Angular performance. I believe/hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future.
Here is a reference that talks more in depth about some of the concepts i mentioned above:
https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294
Best Answer
Although you can't log dom/web events in the console that don't cause server requests, you can increase the amount of information that the compilation process and static web server provide by passing a
--verbose
flag when starting up:ng serve --verbose
.Also, if you're running a proxy a server to hit a local API server and you want some more logging regarding how those requests are being proxied, you can increase the
logLevel
in your proxy configuration.Example
proxy.conf.json
:You would then be starting the server as
ng serve --proxy-config proxy.conf.json --verbose
.