Angular gives `Refused to execute inline event handler` error

Question

I have created an angular application. which gives the following error in the browser

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". 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.

It only occurs when "optimization" is set to true inside angular.sjon. So I can fix this error easily, but it doesn't feel as the right solution. Is there a better solution for this issue?

Answer 1

I had to add this on production configuration on angular.json

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": false
  },
  "fonts": true
},

Because "optimization": false makes the bundle size too big.