Angular: inlineCritical optimization set to false does not remove inline styles (required for...

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,
}
}


Console errors

Continue reading...