admin管理员组文章数量:1289539
I have many ponents and i want to include js files each. I have to use 3rd party js files and this js files are specific for any ponent. I mean that these js files are not global, they are ponent specific. So, i want to include a js file to ponent.
How to i include js files to ponents ?
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>
postponent.html ( ponent html )
<p> Post 1</p>
<p> Post 2 </p>
<p> Post Bla bla bla </p>
<!-- This scripts is only for this ponent -->
<!-- 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 -->
userponent.html ( ponent html )
<p> User 1 </p>
<p> User2 </p>
<p> User Bla bla bla </p>
<!-- This scripts is only for this ponent -->
<!-- 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 *ponent.html
Angular doesnt agree that usage.
I have many ponents and i want to include js files each. I have to use 3rd party js files and this js files are specific for any ponent. I mean that these js files are not global, they are ponent specific. So, i want to include a js file to ponent.
How to i include js files to ponents ?
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.ponent.html ( ponent html )
<p> Post 1</p>
<p> Post 2 </p>
<p> Post Bla bla bla </p>
<!-- This scripts is only for this ponent -->
<!-- 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.ponent.html ( ponent html )
<p> User 1 </p>
<p> User2 </p>
<p> User Bla bla bla </p>
<!-- This scripts is only for this ponent -->
<!-- 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 *.ponent.html
Angular doesnt agree that usage.
Share Improve this question asked Feb 5, 2019 at 1:04 canmustucanmustu 2,6594 gold badges25 silver badges40 bronze badges 3- You are using Angular. You shouldn't be injecting JS files. Look for the NPM package. If it's not there, most likely it's an old library what you are trying to use. – Patricio Vargas Commented Feb 5, 2019 at 5:59
- This is how angular works i think. I'm new at this. Getting understand. Thank you so much. When i need a third party js plugin, i have to download its npm package, everytime, right ? Thanks, @Patricio Vargas – canmustu Commented Feb 5, 2019 at 15:47
- correct. everytime you need a third party library look for the npm package. – Patricio Vargas Commented Feb 5, 2019 at 17:38
4 Answers
Reset to default 3In case, if anyone is still struggling in 2022, and he/she wants to add JS file in any one ponent. This is how I did:
In ponent.ts file:
ngOnInit(): void {
let node = document.createElement('script');
node.src = "https://cdn.jsdelivr/npm/[email protected]/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);
}
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 ponent ts
Including jQuery in your Angular ponents leads to misery but if you really are determined to go down that path you do it in your TypeScipt file of your ponent, 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.ponent.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...
}
You can create an addScript() method and use it in ngOnInit(). If you need it in any other ponents, you can create a ScriptService and use it in ponents.
import {DOCUMENT} from '@angular/mon';
@Component({
selector: 'app-x',
templateUrl: './app-x.ponent.html'
})
export class AppX implements OnInit {
constructor(@Inject(DOCUMENT) private readonly document: Document) {
}
private addScript(scriptSrc: string) {
const script = this.document.createElement('script');
script.type = 'text/javascript';
script.src = scriptSrc;
script.async = true;
this.document.head.appendChild(script);
}
public ngOnInit(): void {
this.addScript('assets/plugins/jquery/jquery.min.js');
this.addScript('assets/plugins/bootstrap/js/bootstrap.bundle.min.js');
}
}
本文标签： javascriptHow to Include JS File To Component in AngularStack Overflow
版权声明：本文标题：javascript - How to Include JS File To Component in Angular - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741410051a2377177.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论