Después de actualizar a Angular 12 (12.2.1) desde 11, obtengo un bloque de estilo inyectado justo antes del enlace de mi hoja de estilo
<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>Esa última línea (cuerpo) está rompiendo la capacidad de respuesta de mis páginas.
Esto es solo en ng build, no aparece localmente en ng serve. No puedo averiguar de dónde viene o qué módulo es el responsable de hacer esta inyección. Estoy usando ng-bootstrap 10, pero cambiarlo a una versión anterior no afecta el bloque de código anterior.
Corregido con la respuesta aquí: https://stackoverflow.com/a/67582075/382281
simplemente agregue inclineCritical: false a su archivo angular.json la compilación particular.
"optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false } },