When serving your Angular application, the server should include a randomly-generated nonce in the HTTP header for each request. You must provide this nonce to Angular so that the framework can render <style>
elements. You can set the nonce for Angular in one of two ways:
Way 1: Set the ngCspNonce
attribute on the root application element as <app ngCspNonce="randomNonceGoesHere"></app>
. Use this approach if you have access to server-side templating that can add the nonce both to the header and the index.html when constructing the response.
Way 2: Provide the nonce using the CSP_NONCE
injection token. Use this approach if you have access to the nonce at runtime and you want to be able to cache the index.html.