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