Angular: inlineCritical optimization set to false does not remove inline styles (required for strict CSP)

#angular #csp

I am working on an Angular 14 project where I need to comply with a strict Content Security Policy (CSP) that includes the directive "style-src 'self'". This means I cannot have any inline-styles in my application.

How can I completely remove inline styles to ensure that I can use style src 'self' in my CSP? Is there any additional configuration or workaround needed to prevent Angular from inlining styles?

I cannot use ngCspNonce here as it is not supported in Angular version 14.

I tried setting the 'inlineCritical' option to 'false' in the angular.json file under the build configurations, expecting it to remove the inline styles.

   `"build": {
      "configurations": {
          "optimization": {
            "scripts": true,
            "styles": {
              "minify": true,
              "inlineCritical": false
            }
          },
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
       }
    }`