'Angular build generates index.html with <style> tag

My build process generates index.html with tag <style>, but because of I use CSP and i dont want to insert into my code style-src 'unsafe-inline' it doesen't feel right for me.

My styles in angular.json looks like:

"styles": [
              "src/styles/fonts.scss",
              "src/styles.css",
              "src/styles/app.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ],

After build i see content of files in index.html:

...

<style>@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i);:root{--blue:#007bff;--indigo:#6610f2;--purple:#7416f5;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#fffd64;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#023cc1;--secondary:#ddd;--success:#28a745;--info:#17a2b8;--warning:#fffd64;--danger:#dc3545;--light:#f8f9fa;--dark:#222326;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--breakpoint-xxl:1400px;--breakpoint-xxxl:1600px;--font-family-sans-serif:"Roboto",sans-serif;--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;font-family:Roboto,sans-serif;font-size:1rem;font-weight:400;line-height:1.25;color:#222326;text-align:left;background-color:#edf0f5}@media print{*,:after,:before{text-shadow:none!important;box-shadow:none!important}@page{size:a3}body{min-width:992px!important}}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>

....

How to avoid inline styles in index.html ?

htmlangularbuildcontent-security-policy


Solution 1:[1]

I found a solution detailed in this post: you can change the optimization boolean property in your angular.json and specify it to avoid inline critical css rules:

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

Angular optimization configuration is explained here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marco Luly

Related Questions