What adds <style type = "text / css"> body {display: none! Important} </style>
I followed the following instructions for my application:
https://github.com/yeoman/generator-angular#readme
My index (before assembly)
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/app.css --> <link href="app.less" type="text/css" rel="stylesheet/less"> <!-- endbuild --> My pointer (in a text editor)
<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body> Index Index (browser)
<head> <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> <style type="text/css">body { display: none !important }</style></head> <body> The problem may be in the gruntfile.js file
http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview
Thank you in advance for your answers!
+5
2 answers
This is due to ( less.js ):
// Simulate synchronous stylesheet loading by blocking page rendering if (!options.async) { css = 'body { display: none !important }'; head = document.head || document.getElementsByTagName('head')[0]; style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } so all you have to do is add this to less.js
<script> less = { async: true } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script> +6
I do not use Angular, but had a similar problem when this <style type="text/css">body { display: none !important }</style> suddenly appears at the end of the head tag, actually rendering the entire page non-display.
I found out that the culprit was less.js Just by commenting, the line corrects it.
0