I'm using Angular 8 and I'm having problem with it's
<style>. I have an old question about how to extract css into a single file in Angular. We can definetely do that with a single configuration
extractCss set to be
true. However, if you don't style your components with "css module" in mind, then even if you can moving them out into a single file, it still won't work properly due to styles getting overriden. I have resolved all of that manually :(. I have even forked the only external library that we use
ng2-completer to remove all of the component styles in this library. Now the only single issue left is this annoying empty
First think come to my mind is to trace the source code to see if there is a single inline element dangling around. There is none, I've checked all the code (even in the
.svg files). I've noticed that the
<style> element is injected only when I'm navigating through
<router-outlet>. I've tried commenting it out and voula, the
<style> element is not there anymore.
I then comment out the
html code that is navigated to by
<router-outlet>, strangly, the problem's still remained.
I've googled like crazy and the only closet thing I've found out is the need for removing this empty
<style> can be resolved if you use Angular server side rendering.
I cant found out if this is Angular issue or not as there is no related document.
All I need is to get rid of that empty
<style> to completely remove all of the
CSP error logs in browser's console.
I've tried updating the
ng2-completer and the project to Angular 9, it resolves the issue but the clients don't want to upgrade because of the effor of testing the entire application again. One more reason is I don't know why it resolves the issue so I will not apply the solution since I don't know how it works.