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?