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.

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
– 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
– canmustu, Commented Feb 5, 2019 at 15:47
correct. everytime you need a third party library look for the npm package. — Patricio Vargas
– Patricio Vargas, Commented Feb 5, 2019 at 17:38

Abhishek Pandey · Accepted Answer · 2022-02-09 13:00:49Z

3

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/[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);
 }

answered Feb 9, 2022 at 13:00

Abhishek Pandey

4805 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JanBrus Over a year ago

The path to the script can be for example node.src = "assets/somescript.js"; if you have the script in assets folder.

Patricio Vargas · Accepted Answer · 2019-02-05 06:05:27Z

2

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

edited Feb 5, 2019 at 6:05

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

answered Feb 5, 2019 at 2:04

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Comments

Adrian Brand · Accepted Answer · 2019-02-05 01:53:20Z

1

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...
}

answered Feb 5, 2019 at 1:53

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Comments

Ayaz · Accepted Answer · 2024-02-02 11:13:54Z

You can create an addScript() method and use it in ngOnInit(). If you need it in any other components, you can create a ScriptService and use it in components.

import {DOCUMENT} from '@angular/common';

@Component({
    selector: 'app-x',
    templateUrl: './app-x.component.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');
    }
}

Collectives™ on Stack Overflow

How to Include JS File To Component in Angular

index.html ( main html in project )

post.component.html ( component html )

user.component.html ( component html )

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html ( main html in project )

post.component.html ( component html )

user.component.html ( component html )

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related