How to Include JS File To Component in Angular
Question
I have many components and i want to include js files each. I have to use 3rd party js files and this js files are specific for any component. I mean that these js files are not global, they are component specific. So, i want to include a js file to component.
How to i include js files to components?
index.html ( main html in 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></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 html )
<p> Post 1</p>
<p> Post 2 </p>
<p> Post Bla bla bla </p>
<!-- This scripts is only for this component -->
<!-- This js section has to go to specific place in index.html where i type -->
<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 doesn't include these scripts to page -->
user.component.html ( component html )
<p> User 1 </p>
<p> User2 </p>
<p> User Bla bla bla </p>
<!-- This scripts is only for this component -->
<!-- This js section has to go to specific place in index.html where i type -->
<script src="/assets/plugins/anotherjs/anotherjs.min.js"></script>
<script src="/assets/plugins/chart2/jquery.chart2.min.js"></script>
<!-- Angular doesn't include these scripts to page -->
I can't add js files by using " <script> " tag in *.component.html
Angular doesnt agree that usage.
3 answers
solution1
2 2022-02-09 13:00:49
In case, if anyone is still struggling in 2022, and he/she wants to add JS file in any one component. This is how I did:
In component.ts file:
ngOnInit(): void {
let node = document.createElement('script');
node.src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js";//Change to your js file
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
solution2
1 2019-02-05 02:04:25
You cannot add external files in the template.
You can add them in the index.html or inside scripts in the angular-cli.json
Ideally you should not include the entire script if possible and use node modules and import them as necessary in the corresponding component ts
solution3
0 2019-02-05 01:53:20
Including jQuery in your Angular components leads to misery but if you really are determined to go down that path you do it in your TypeScipt file of your component, not in the template.
First you need to install jQuery to your app.
npm install jquery --save
In your angular-cli.json add:
],
"scripts": ["../node_modules/jquery/dist/jquery.min.js"],
Now in you app.component.ts, you will need to import jQuery:
import * as $ from "jquery"
Now you can write your jQuery after on init
ngOnInit() {
$...add your code here...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.