Managing multiple components in a project involves including specific JS files for each component. These third-party JS files are unique to each component and cannot be global. So, the challenge is how to include these component-specific JS files.
How can we include JS files for individual components?
index.html (the main HTML file in the project)
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="fixed-navbar">
<div class="site">
<app-root></app-root>
</div>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Component Specific JS Files Have To Come Here -->
<!-- Component Specific JS Files Have To Come Here -->
<!-- Component Specific JS Files Have To Come Here -->
<!-- Component Specific JS Files Have To Come Here -->
<!-- Component Specific JS Files Have To Come Here -->
</body>
</html>
post.component.html (component's HTML file)
<p> Post 1 </p>
<p> Post 2 </p>
<p> Post Bla bla bla </p>
<!-- These scripts are only for this component -->
<!-- This JS section must be placed in index.html at the designated location -->
<script src="/assets/plugins/parallax/parallax.min.js"></script>
<script src="/assets/plugins/easypiechart/jquery.easypiechart.min.js"></script>
<script>
$(function () {
$('.easypiechart').easyPieChart();
});
</script>
<!-- Angular does not load these scripts onto the page -->
user.component.html (component's HTML file)
<p> User 1 </p>
<p> User 2 </p>
<p> User Bla bla bla </p>
<!-- These scripts are only for this component -->
<!-- This JS section must be placed in index.html at the designated location -->
<script src="/assets/plugins/anotherjs/anotherjs.min.js"></script>
<script src="/assets/plugins/chart2/jquery.chart2.min.js"></script>
<!-- Angular does not load these scripts onto the page -->
I cannot add JS files using "<script>" tags in *.component.html files
Angular does not allow that practice.