Angular build index file: where does the injected style come from?

Question

I have an Angular application which I have just finished migrating from v7 to v12. I use my own custom index file (perhaps this makes no difference), ie I have the following in my angular.json file...

"projects": {
"routes": {      
  "architect": {
    "build": {          
      "configurations": {            
        "production": {
          "index": "src/index.aspx",  // <---- my index file

When I build, and this file is copied, has Angular bundles injected etc, it also adds a long style

<style>@charset "UTF-8";:root{--blue:#628aba;--indigo:#510fbd;--purple:#5a379b;--pink:#e83e8c;--red:#a11422;--orange:#ce640d;--yellow:#ffff85;--green:#178f33;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#757575;--gray-dark:#3b3b3b;--primary:#628aba;--secondary:#b5b5b5;--success:#178f33;--info:#17a2b8;--warning:#ffff85;--danger:#a11422;--light:#fafafa;--dark:#3b3b3b;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:Tahoma,Verdana,Arial,Helvetica sans-serif;--font-family-monospace:Consolas,"Courier New",SFMono-Regular,Menlo,Monaco,"Liberation Mono",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{font-size:1rem;font-weight:400;line-height:1.5;color:#000;text-align:left;background-color:#fff;}@page {size:a3;}body{min-width:992px!important;}</style><link rel="stylesheet" href="styles.86e8f850c5457bf98a6f.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.86e8f850c5457bf98a6f.css"></noscript>

I am wondering where this comes from? Is this from the global styles.scss? I would not recognize as my styles.scss links to other styles not done by myself (eg Angular material)

My one issue is this, unknowingly to me, has included

body{min-width:992px!important;}

So I was trying to work out where this was coming from, as I don't want it. I have look through all our own shared etc styles, and can't find this anywhere. Also did a search through the materials node_modules folder, not finding it.

For now I am overriding it on the body element, but would like to know where all these come from?

Answer 1

It comes from inlineCritical optimization option. See details here https://angular.io/guide/workspace-config#styles-optimization-options

Just set it to false in your angular.json file:

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

Answer 2

I had this issue in version 12. After upgrading Angular to version 13, it seems it's been fixed.