Angular-cli: Feature: CSS Live Reload w/o browser refresh

[kchojhu]

As of now, if I edit the scss or css files the browser would auto refresh. I think it would be very convenient if there's a way to update the CSS w/o browser refresh.

[catull]

Perhaps this was not possible at the time.
With Angular CLI 1.0.0.beta.30, I have this functionality.

ng new style-app
cd style-app
ng serve

edit app.component.css to affect font-color, or boldness, ...

Webpack does its thing and rolls another dist.
The browser tab gets refreshed without doing anything.
I only had to save the changes of app.component.css

[hansl]

Closing this as fixed and obsolete.

[kchojhu]

I'm not sure if this issue has been fixed or not. As the title of this ticket, I'm asking for CSS update w/o the refresh. If I change the CSS file then it doesn't need to recompile TS or other process other than SASS compilation (if I'm using sass). Here's a sample link that shows how to do that in Webpack. When this is enabled, I can see the CSS change almost instantly on the browser which can save a bit of a time.

https://www.bensmithett.com/smarter-css-builds-with-webpack/

[mjamin]

@hansl: This is not working as of 1.0.0-beta.32.3!

@catull: We're not talking about reloading the entire page after CSS/SCSS changes (which is working fine). We're talking about applying updated CSS without reloading the page.

[simonwiles]

I'm not sure how difficult this would be to implement, given that css is served in js files in dev mode, but it sure would be nice not to have to reload the entire page (and likely reset the application state) to see the effects of changes in .scss files. In any event, this issue seems to have been closed in error.

[petr001]

This is why Angular sucks. Webpack has this functionality by default, but Angular has to have it's own crappy implementation for this. Hate the fact that everything in Angular is a problem...

[YuniorGlez]

It's a matter of searching online and you'll find everything :)

I found this story from Nov 2017 which explains how to do it with the hmr flag. But it is not instantly change :S it takes about 500ms in my app for example.

https://github.com/angular/angular-cli/wiki/stories-configure-hmr

[shyamal890]

Thanks @YuniorGlez wonder why this is not enabled by default.

[angular-automatic-lock-bot[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._}