I'm experiencing an issue with Angular2, Bootstrap 3.3.7, and Bootstrap Plugins. I have imported all the necessary stylesheets and JavaScript files in the 'index.html' file.
Below is the snippet from the index.html:
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- Bootstrap Table -->
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<base href="/">
</head>
<!-- Display the application -->
<body>
<DVBViewerApp>Loading...</DVBViewerApp>
</body>
</html>
All the files are being recognized by the lite-server, but I am facing an issue where Bootstrap 3.3.7 works fine throughout the application, while the Bootstrap plugins (bootstrap-toggle and bootstrap-table) only work on the index.html page and not on any of my components.
Can anyone help me identify the problem?
Thank you for your assistance!