1

After upgrading to Angular 12 (12.2.1) from 11 I am getting an injected style block right before my style sheet link

<style>
@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Open+Sans);
:root{
--blue:#007bff;
--a bunch of color variables --
line-height:1.5;color:#212529;
text-align:left;background-color:#fff;}
img{border-style:none;}
img{vertical-align:middle;}
img{page-break-inside:avoid;}
@page {size:a3;}
body{min-width:992px!important;}
</style>

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

</head>

That last line (body) is breaking the responsiveness of my pages.

This is only on ng build, it does not appear locally on ng serve. I can not figure out where it is coming from or what module is responsible for making this injection. I am using ng-bootstrap 10 but downgrading it to previous version does not affect the above code block.

bikeguy
  • 311
  • 1
  • 3
  • 10

1 Answers1

2

Fixed with the answer here: https://stackoverflow.com/a/67582075/382281

just add inclineCritical: false to your angular.json file the particular build.

"optimization": {
  "scripts": true,
  "styles": {
  "minify": true,
  "inlineCritical": false
  }
},
bikeguy
  • 311
  • 1
  • 3
  • 10