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?

I think you can't because the scss files need to be compiled. — Robin Dijkhof
– Robin Dijkhof, Commented Jul 10, 2018 at 19:53
That sucks, makes designing for angular 10x slower than normal — Guerrilla
– Guerrilla, Commented Jul 10, 2018 at 23:14

Rutger van Baren · Accepted Answer · 2018-10-26 12:53:55Z

2

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

edited Oct 26, 2018 at 12:53

answered Oct 26, 2018 at 12:47

Rutger van Baren

8,0182 gold badges28 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devstructor Over a year ago

HMR is not working with lazy loaded modules what makes it pointless in many cases

Cam Over a year ago

Your first link broke

Collectives™ on Stack Overflow

Angular CLI Css Injection instead of reload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related