title: Angular gives `Refused to execute inline event handler` error
body: <p>I have created an angular application.  which gives the following error in the browser</p>
  <p><a href="https://i.stack.imgur.com/jSAIz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jSAIz.png" alt="enter image description here" /></a></p>
  <pre><code>Refused to execute inline event handler because it violates the following Content Security Policy directive: &quot;script-src 'self'&quot;. Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
  </code></pre>
  <p>The reason is that angular injects the following in index.html</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; media=&quot;print&quot; onload=&quot;this.media='all'&quot;&gt;
  </code></pre>
  <p>Its that <code>onload=&quot;this.media='all'&quot;</code></p>
  <p>One solution is to set <code>&quot;optimization&quot;</code> to false, in which case angular doesn't inject this code. But that doesn't sound like the best solution. Any suggestions how to do this?</p>
  <p>An other solution, which I think is a little bit better than the previous one, is to create a wrapper component  which holds all the styling from <code>styles.scss</code>. In my case, for this to work, I also needed to to set the <code>encapsultaion</code> of that wrapper component to <code>ViewEncapsulation.None</code></p>