如何删除标题中的Angular空<style>标签?

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 <style>

enter image description here

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.

请帮助建议解决方案或解决方法(由于CSP,因此需要此方法)。

评论