Angular Component Styles violate CSP default-src 'self'

[MrNocTV]

Context: This is not just an issue with ng2-completer but also an issue with Angular/React in general. These frameworks are not built with CSP in mind.

Angular will generate <style> element in the DOM when rendering the components if you use component style. Component style is just a component with styleUrls tag.

Issue: Since ng2-completer is also using component styles so it also vilolates CSP. More specifically, in my project, it will violate default-src 'self'.

Solution: Stop using component style, we still can keep the structure intact (keep the css file inside the component directory). We just need to add relative link of this css file into styles of angular.json. Angular CLI will not generate <style> for css files in styles, instead it will bundle all files in styles into a single file, and link that file into the DOM using <link>.

[MrNocTV]

This is the <style> element of ng2-completer in head. If we choose to go with my solution, those styles will be moved in the <link rel=stylesheet href=....> above