Angular styles HMR with isolation (webpack hmr)

182 views Asked by At

I would like to have a setup with Angular 4, Webpack & HMR.

The part I care about the most is actually style substitution. I did some homework and was not able to find a working solution so far.

Just to check: Does anyone have an out-of-the-box solution for this?

If not then I guess I will need to understand the topic more:

1) What is the algorithm that Angular is using for assigning component specific attributes to css?

2) Is there any API in Angular (it's JavaScript, so I don't mind if it's public or implementation detail/"hidden") that would allow me to reload/substitute the styles for a given component? I did some research on HMR and if such API exists or it's doable then I would love to try & use it.

3) Please verify if my assumptions are true: From the technical perspective this shouldn't be too difficult - Angular (at least in my setup) loads all the styles as <style> tags - if I'm not mistaken one per component type.

If that is all true then it shouldn't be a big of a deal to find the correct <style> tag & replace it's content with what I'm getting from Webpack HMR.

The only problem would be to apply the isolation - compile the css & apply the [__ngSomething] attributes in there.

0

There are 0 answers