How prevent Angular@12 rendering a 'onload' property on the <link>-tag when using SCSS

user_16125785 0
Viewed 144

When using SCSS in Angular@12 the -tag has a property onload:

<link rel="stylesheet" href="styles.672c1ac3d6da8cc311a2.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.672c1ac3d6da8cc311a2.css"></noscript>

However when the SCSS is empty or no SCSS is used it only renders:

<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css">

When using CSP-Headers that only allow 'self':

default-src https://*.mysite.nl ; child-src 'self' ; connect-src 'self' ; font-src 'self' ; frame-src 'self' ; frame-ancestors 'self' ; img-src 'self' ; script-src 'self' ; style-src 'self' ;

this results in a violation of the CSP-Header. Now I need to add 'unsafe-inline' to the script-src. I do not want that!

Is it possible to force the production build not to use the onload?

angular12 angular sass
1 Answers

Found it!

Adding "inlineCritical": false to the angular.json solved my problem.

        "configurations": {
            "production": {

              "optimization": {
                "styles": {
                  "inlineCritical": false
                }
              }
            },
          },
user_161257850
Related