Angular CLI Css Injection instead of reload

Question

When I run ng serve if I make a change to a .scss file it will cause the page to reload. This is inconvenient and can lose some state or dev tool changes.

Usually when I work on a design I use something like browsersyc to inject the css without refreshing the page. This saves me a massive amount of time when I have to debug something tricky.

Is there anyway to get angular cli to inject .scss changes instead or reloading page?

edit:

From the webpack documentation:

HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the style-loader. In order for patching to work, the style-loader implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones.

Similarly, when implementing the HMR interface in a module, you can describe what should happen when the module is updated. However, in most cases, it's not mandatory to write HMR code in every module. If a module has no HMR handlers, the update bubbles up. This means that a single handler can update a complete module tree. If a single module from the tree is updated, the entire set of dependencies is reloaded.

From what I hear Angular-CLI supports HMR but I can't find any official documentation about it.

Is it possible to implement a style loader in Angular 6?

Answer 1

With Angular 7 you can follow this guide to enable HMR. (Hot Module Replacement)

It is not the same as CSS injection but it is a lot faster than a full reload & compile.

The great thing is it will also work for your ts files.

---

Small addendum:

I think you can infact load the CSS changed by injection but following this piece of the HMR documentation