My current setup involves an Angular application (v4.0.1) with webpack deployed on Heroku. I have a loading spinner in place to show while the app is loading, and it works well locally. However, when deployed on Heroku, the loading spinner (specifically the CSS for spinning the loading spinner) doesn't seem to be loading properly.
I've attempted multiple fixes to solve this issue, but nothing seems to work in production. All the CSS files within the app load correctly after the app loads, except for the one CSS file I included in the index.html specifically for the loading spinner, which needs to be available before the Angular app loads.
Here is my simplified file structure:
.
+-- config/
+-- src/
| +-- app/
| +-- assets/
| +-- icons/
| +-- loading-spinner.svg
| +-- stylesheets/
| +--- loading-spinner.css
| +-- vendor/
| +-- index.html
| +-- main.ts
| +-- polyfills.ts
| +-- tsconfig.json
+-- package.json
+-- server.js
This is how my index.html looks:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Stylist Suite 2.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="src/assets/stylesheets/loading-spinner.css">
</head>
<body>
<ss-app>
<div class="loading-spinner ss-loading"></div>
</ss-app>
</body>
</html>
Here is a snippet from my loading-spinner.css file:
/* --- Loading Spinner - Needed Before App Loads ---*/
.loading-spinner {
width: 42px;
height: 44px;
background: url("../icons/loading-spinner.svg") no-repeat;
margin: 0 auto;
animation: spin 2.5s linear infinite;
-webkit-animation: spin 2.5s linear infinite;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-spinner .ss-loading {
position: fixed;
top:50%;
left:50%;
margin-left:-21px;
margin-top: -22px;
align-self: center;
justify-self: center;
}
If you think the issue might be with the webpack.prod.js file, please take a look at the provided configurations and offer any advice or solutions. Thank you.