My Angular application (version 14.2.0) is integrated with bootstrap (version 5.2.3).
Upon building and deploying the application on a local IIS server, everything displays correctly as shown in the image below: https://i.sstatic.net/pLDs6.jpg
However, when I upload it to an online hosting server, the application stops functioning properly, displaying an issue as shown here: https://i.sstatic.net/7HHF5.png
Bootstrap was installed using the npm command and my index file structure after the build is like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FairValue</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
/* CSS styling goes here */
</style>
<link rel="stylesheet" href="styles.0a53e70ae8d362c5.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="styles.0a53e70ae8d362c5.css"></noscript>
</head>
<body>
<app-root></app-root>
<script src="runtime.5b42ae0133fe0f8f.js" type="module"></script>
<script src="polyfills.df47d0ca2f99368a.js" type="module"></script>
<script src="scripts.e8076bd22250257e.js" defer></script>
<script src="main.b3d80f33060ff749.js" type="module"></script>
</body>
</html>
I am unsure of what is causing this issue. Could there be a different approach to including bootstrap in the project?