I have a project running on Angular, when the production build is deployed on server. for HTTP everything is fine and page loads smoothly. BUT If I try to open the page via HTTPS , everytime I see the css build file is shown as Not Found as below -
As you can see all other js files are loading properly over HTTPS except css file. Along with that I get the below errors in my console -
GET https://192.168.18.14/project/styles.66bf4bc970a266d409e6.css
net::ERR_TOO_MANY_RETRIES
Due to this css file failure, my web page looks to be broken, as all the styling properties are not being fetched over https.
index.html -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no"/>
<!--<meta name="referrer" content="origin" />-->
<meta name="referrer" content="no-referrer" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.Angular.com ws://www.angular.com:8099 'unsafe-eval' 'unsafe-inline'" > -->
<base href="/project/"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.66bf4bc970a266d409e6.css"></head>
<body>
<script src="assets/js/crypto_page.js"></script>
<script src="assets/js/sha256crypt.js"></script>
<app-root></app-root>
<script type="text/javascript" src="runtime.3cd6faf269ed39890637.js"></script><script type="text/javascript" src="polyfills.3f250b0d9782cb52b3a5.js"></script><script type="text/javascript" src="main.5620e5cd90625d6c8e5f.js"></script></body>
</html>Please note that none of this issue is occuring over http, only https have this issue .
Thanks.