How to Use External Javascript in TypeScript Angular - Stack Overflow

admin管理员组

文章数量:1404942

---

I want to use jquery and easypiechart js file's functions in typescript.

It doesn't work this way.

How to define these script what i specified in code as typescript ?

---

indexponent.ts

import { Component, OnInit } from '@angular/core';

import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easypiechart/jquery.easypiechart.min.js";

// these above 2 js files are defined in angular.json script section

@Component({
  selector: 'app-index',
  templateUrl: './indexponent.html',
  styleUrls: ['./indexponent.scss']
})

export class IndexComponent implements OnInit {

  constructor() {}

  ngOnInit() {

    //$(function(){
    //  $('.easypiechart').easyPieChart();
    //});

    // How to write this above script as typescript ?????????????????????

  }
}

---

I want to use jquery and easypiechart js file's functions in typescript.

It doesn't work this way.

How to define these script what i specified in code as typescript ?

---

index.ponent.ts

import { Component, OnInit } from '@angular/core';

import * as $ from "../../../../../assets/plugins/jquery/jquery.min.js";
import { easyPieChart } from "../../../../../assets/plugins/easypiechart/jquery.easypiechart.min.js";

// these above 2 js files are defined in angular.json script section

@Component({
  selector: 'app-index',
  templateUrl: './index.ponent.html',
  styleUrls: ['./index.ponent.scss']
})

export class IndexComponent implements OnInit {

  constructor() {}

  ngOnInit() {

    //$(function(){
    //  $('.easypiechart').easyPieChart();
    //});

    // How to write this above script as typescript ?????????????????????

  }
}

• javascript
• angular
• typescript

Share Follow asked Feb 5, 2019 at 3:52 canmustucanmustu 2,66944 gold badges2525 silver badges4040 bronze badges 4

• 1 This looks dublicate of this. stackoverflow./questions/47346559/… – Bijay Yadav Commented Feb 5, 2019 at 3:56
• as pointed out it`s a duplicate also why would you use jquery in angular? any specific reason for that? – Manit Commented Feb 5, 2019 at 4:08
• Don't use jquery in angular. Choose one framework or the other – Our_Benefactors Commented Feb 5, 2019 at 4:09
• Possible duplicate of using external JS libraries in my angular 2 project – adiga Commented Feb 5, 2019 at 4:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

From the above question,it looks like jquery.easypiechart.min.js is the one that you need to use in your angular application as external js.

1. Put the js under assets folder say /assets/js/jquery.easypiechart.min.js

2. Goto your projects angular.json file and under scripts node of architect node put as an entry in the array.

   "scripts": [ "./node_modules/jquery/dist/jquery.min.js",
   "./src/assets/js/jquery.easypiechart.min.js" ]

Now you can refer the external js in any of your projects ponents

  declare var $: any;// referencing jQuery library
    @Component({
      selector: 'app-index',
      templateUrl: './index.ponent.html',
      styleUrls: ['./index.ponent.scss']
    })

    export class IndexComponent implements OnInit {
      constructor() {}
      ngOnInit() {
      $(document).ready(function () {
          //accessing easypiechart.min.js.
          $('.easypiechart').easyPieChart();
         });
      }
    }

If you have included them in the scripts or index.html, you don't have to import them to the .TS file again

Use declare instead and it should work What does 'declare' do in 'export declare class Actions'?

Instead of putting it in asset folder you should use it as node_modules dependency

For easy pie chart run this npm i easy-pie-chart --save & for jquery run npm i jquery

Normally you don't want to use jquery in Angular, because it usually implies to modify directly the DOM, which is a bad practice, but there is the way to do it: https://medium./all-is-web/angular-5-using-jquery-plugins-5edf4e642969

If you wanna plot a pie chart or other types of charts, you could use ng2-charts instead, it will allow you to use charts.js with Angular and Typescript.

本文标签： How to Use External Javascript in TypeScript AngularStack Overflow