Angular-cli: Feature request: css hot replacement

[jurgen-reconcept]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Desired functionality.

Is there any chance hot replacement of updated CSS is going to be implemented in the cli? I'm using Ionic 2 for a different project, which has this feature. I think it's really useful to not have the whole application rebuilt and especially reloaded.

Say for example I am trying to style a particular element in a modal window that takes a few clicks to navigate to and open, it's really annoying to have to do this every time I make a small Sass adjustment.

[shyamal890]

Frankly, I believe this is a Must Have feature and not Nice to have. Imagine your component requires 2-4 secs to load and with a minor change in css the browser tab is refreshed! This is why Ionic guys had to come up with a way to update css without reloading the app.

[cmaart]

This "nice-to-have"-ticket is a deal breaker for lot of designers out there to work directly within an angular project which as a result creates huge overhead for working with them

[ewohlken]

My angular project has grown to a point where front end development is severely impaired by the rebuild times after updating css. From a front-end perspective this is definitely a must have for any large project

[herkulano]

@StephenFluin in ng-conf you asked for feedback from designers.

This is the number one problem with angular from a designer's perspective.

Although there's some HMR support, it's half-baked into the CLI and not fully supported out-of-the-box like vue-cli for example.

The current story for HRM is broken because it's relying on a mostly dead project and the implementation is cumbersome, especially with support for state management libraries like ngrx or ngxs.

The HMR implementation should be as simple as setting a flag or config in the CLI and hooking it up to the store.

Related issues:
https://github.com/angular/angular/issues/11942
https://github.com/angular/angular-cli/issues/10268
https://github.com/gdi2290/angular-hmr/issues/74

[BenRacicot]

This is my #1 request for the Angular team. HMR and hot CSS is something I've come to depend on and miss it when working on Angular projects. Is there anything I can do to help get this more attention?

[Rush]

Let me add my support too. Who should we send the beer to? I actually care more about `ngtools/webpack' but I'm sure having it in CLI will help

[BenRacicot]

@Rush Same! I'd throw down my share for this to become a feature. I reached out to the guys who build Prepros. He said he'd take a look.

[mbritton]

I would PayPal one hundred bucks to the developer who checked this functionality in, with unit tests.

[stephengardner]

I would PayPal another hundred bucks. So make that $200 from @mbritton and I. I'll give it 30 days.

[pauldraper]

Not as slick as a CSS-only option, but https://github.com/wags1999/angular-hmr-lazy-components seems to work.

[hiepxanh]

Hello everybody

Description

I belive that fast edit style can help us so much. Currently we need to wait 1-3s to reload the application to update the style. I belive we can do this faster (apply style realtime).

I have a plugin that allow us to do that. It's emit change base on vscode extention to chrome extention. Fast reload without reload all application https://www.youtube.com/watch?v=W-hWhR5GX_c&t=1s
But this is not enough.

Describe the solution you'd like

I have header.scss and footer.scss, which were imported by styles.scss. I would like to update footer.scss then reflect on browser without rebuild. So I guest I have to rebuild all scss tree. Can we do that? How I can do that?

Describe alternatives you've considered

I don't know. Angular team can me give some instruction that can guide me to interactive with built-in tool. Then I will do it myself.

anyone can help me contact to angular team, I will really be appreciate this.

@mbritton @stephengardner can you check this out? https://github.com/xanhtool/SnapCss

[alan-agius4]

Closing as this should work out-of-the-box when using Angular CLI version 11.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

[Rush]

What about non CLI? How to configure it with ngtools/webpack?

[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._}