title: Using Angular Material with strict Content Security Policy
body: <p>I'm developing an enterprise application using Angular 6 with Angular Material 6.</p>
  <p>Now I have to build the project for a new customer that have very strict CSP, that is just</p>
  <p><strong>Content-Security-Policy: &quot;default-src 'self';&quot;</strong></p>
  <p>The policy cannot be modified.</p>
  <p>I searched for previous answers but only came with the fact of moving my components styles from stylesUrls to the styles property in the angular.json. But even doing so, I still have many errors</p>
  <blockquote>
  <p>Refused to apply inline style because it violates the following
  Content Security Policy directive: &quot;default-src 'self'&quot;. Either the
  'unsafe-inline' keyword, a hash
  ('...'), or a nonce
  ('nonce-...') is required to enable inline execution. Note also that
  'style-src' was not explicitly set, so 'default-src' is used as a
  fallback.</p>
  </blockquote>
  <p>I noticed that when the application starts a lot of &lt; style &gt; tags are added to the head of the page by the compiler, and I think that this is the reason of those repeated errors.</p>
  <p><a href="https://i.stack.imgur.com/QBVoC.png" rel="noreferrer">Styles tags</a></p>
  <p>The meta tag for the Content-Security-Policy is added by me and its only use is to simulate the services response header.</p>
  <p>Is there a way to avoid this behaviour? To build all the css in one single file and add it as a &lt; link &gt; tag when the application is loaded?</p>
  <p><strong>EDIT:</strong></p>
  <p>I found a way to get this working by removing all the stylesUrl from the components and by importing the components stylesheet into the main style.scss.
  Then I manually copied everything that was into those style tags into a a css file. Finally I simply linked this css file in my index.html.</p>
  <p>The errors in the console have still remained but the application is working correctly.</p>