Here's one we can figure out. For most of our applications the index.html file begins like this:
<!--
Auto-generated
Do not edit!!!
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AppThatWorks</title>
<link rel="shortcut icon" href="favicon.ico"><link href="vendor.style.css" rel="stylesheet"><link href="progress.style.css" rel="stylesheet"><link href="app.style.css" rel="stylesheet"></head>
<body ng-app="app.app-that-works" ng-strict-di>
<notification></notification>
<dialog></dialog>
<script type="text/x-kendo-template" id="confirm-window-template">
<p>#= hint #</p>
<button class="k-button" id="yes-button">Yes</button>
<button class="k-button" id="no-button">No</button>
</script>
<div ui-view="app-layout"></div>
<div ui-view class="angular-ui-view"></div>
<script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="progress.bundle.js"></script><script type="text/javascript" src="app.bundle.js"></script></body>
</html>
Note the order of the CSS link tags and the script tags near the bottom. We have one application, though, that gives us this index.html file:
<!--
Auto-generated
Do not edit!!!
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AppThatFreaks</title>
<link rel="shortcut icon" href="favicon.ico"><link href="vendor.style.css" rel="stylesheet"><link href="app.style.css" rel="stylesheet"><link href="progress.style.css" rel="stylesheet"></head>
<body ng-app="app.app-that-freaks" ng-strict-di>
<notification></notification>
<dialog></dialog>
<script type="text/x-kendo-template" id="confirm-window-template">
<p>#= hint #</p>
<button class="k-button" id="yes-button">Yes</button>
<button class="k-button" id="no-button">No</button>
</script>
<div ui-view="app-layout"></div>
<div ui-view class="angular-ui-view"></div>
<script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="progress.bundle.js"></script></body>
</html>
In this case the application specific styling in app.style.css can (and does) get overridden by progress.style.css. The script tags are out of order as well.
How can we fix this?