Angular 2 import external js file into component

Question

I m going to import this d3gauge js file into one of my angular2 component  memmon component ts file    import              js d3gauge js   export class MemMonComponent       createMemGauge             new drawGauge this opt      drawGauge   is a function inside d3gauge js           and in the corresponding template file  add    lt script src              js d3gauge js  gt  lt  script gt    But it doesn t work  drawGaugecan t be found    So     what re correct steps to import an external js file to angular2   since I m using webpack  is it possible to do it in webpack  I refer to this question   the webpack solution there doesn t work for me as a result of  ensure can t be resolved

User · Answer

The following approach worked in Angular 5 CLI.

For sake of simplicity, I used similar d3gauge.js demo created and provided by oliverbinns - which you may easily find on Github.

So first, I simply created a new folder named externalJS on same level as the assets folder. I then copied the 2 following .js files.

d3.v3.min.js
d3gauge.js

I then made sure to declare both linked directives in main index.html

<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>

I then added a similar code in a gauge.component.ts component as followed:

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

declare var d3gauge:any; <----- !
declare var drawGauge: any; <-----!

@Component({
  selector: 'app-gauge',
  templateUrl: './gauge.component.html'
})

export class GaugeComponent implements OnInit {
   constructor() { }

   ngOnInit() {
      this.createD3Gauge();
   }

   createD3Gauge() { 
      let gauges = []
      document.addEventListener("DOMContentLoaded", function (event) {      
      let opt = {
         gaugeRadius: 160,
         minVal: 0,
         maxVal: 100,
         needleVal: Math.round(30),
         tickSpaceMinVal: 1,
         tickSpaceMajVal: 10,
         divID: "gaugeBox",
         gaugeUnits: "%"
    } 

    gauges[0] = new drawGauge(opt);
    });
 }

}

and finally, I simply added a div in corresponding gauge.component.html

<div id="gaugeBox"></div>

et voilà ! :)

User · Answer

Instead of including your js file extension in index html  you can include it in  angular-cli-json file   These are the steps I followed to get this working    First include your external js file in assets js In  angular-cli json - add the file path under scripts      app assets js test js  In the component where you want to use the functions of the js file    Declare at the top where you want to import the files as  declare const Test any    After this you can access its functions as for example Test add

User · Answer

You can also try this   import   as drawGauge from              js d3gauge js     and just new drawGauge this opt   in your ts-code  This solution works in project with angular-cli embedded into laravel on which I currently working on  In my case I try to import poliglot library  btw  very good for translations  from node modules   import   as Polyglot from           node modules node-polyglot build polyglot min js       export class Lang        constructor              this polyglot   new Polyglot   locale   en                                    This solution is good because i don t need to COPY any files from node modules       UPDATE  You can also look on this LIST of ways how to include libs in angular

User · Answer

Here is a simple way i did it in my project   lets say you need to use clipboard min js  and for the sake of the example lets say that inside clipboard min js there is a function that called test2     in order to use test2   function you need    make a reference to the  js file inside you index html  import clipboard min js to your component  declare a variable that will use you to call the function    here are only the relevant parts from my project  see the comments    index html    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Angular QuickStart lt  title gt       lt base href   src   gt       lt meta charset  UTF-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt link rel  stylesheet  href  styles css  gt        lt  -- Polyfill s  for older browsers -- gt       lt script src   node modules core-js client shim min js  gt  lt  script gt         lt script src   node modules zone js dist zone js  gt  lt  script gt       lt script src   node modules systemjs dist system src js  gt  lt  script gt        lt script src  systemjs config js  gt  lt  script gt       lt script gt          System import  main js   catch function  err    console error err            lt  script gt        lt  --              HERE IS THE REFERENCE TO clipboard min js -- gt       lt script src  app txtzone clipboard min js  gt  lt  script gt   lt  head gt    lt body gt       lt my-app gt Loading AppComponent content here     lt  my-app gt   lt  body gt   lt  html gt    app component ts   import     txtzone clipboard min js   declare var test2  any     variable as the name of the function inside clipboard min js   Component       selector   txt-zone       templateUrl   app txtzone Txtzone component html       styleUrls    app txtzone TxtZone css          export class TxtZoneComponent implements AfterViewInit           call test2     callTest2                    new test2       the javascript function will execute

User · Answer

After wasting a lot of time in finding its solution  I ve found one  For your convenience I ve used the complete code that you can replace your whole file with   This is a general answer  Let s say you want to import a file named testjs js into your angular 2 component  Create testjs js in your assets folder   assets   testjs js  function test        alert  TestingFunction       include testjs js in your index html  index html   lt  doctype html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt     lt title gt Project1 lt  title gt     lt base href     gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  icon  type  image x-icon  href  favicon ico  gt      lt script src    assets testjs js  gt  lt  script gt    lt  head gt   lt body gt     lt app-root gt Loading    lt  app-root gt   lt  body gt   lt  html gt    In your app component ts or in any component ts file where you want to call this js declare a variable and call the function like below   app component ts  import   Component   from   angular core    declare var test  any     Component     selector   app-root     templateUrl     app component html     styleUrls      app component css       export class AppComponent     title    app works        f        new test            Finally in your app component html test the function  app component html   lt h1 gt     lt button  click   f    gt Test lt  button gt   lt  h1 gt

User · Answer

Let s say you have added a file  xyz js  under assets js folder in some Angular project in Visual-Studio  then the easiest way to include that file is to add it to  angular-cli json    scripts      assets js xyz js       You should be able to use this JS file s functionality in your component or  ts files

User · Answer

Ideally you need to have  d ts file for typings to let Linting work   But It seems that d3gauge doesn t have one  you can Ask the developers to provide and hope they will listen     Alternatively  you can solve this specific issue by doing this  declare var drawGauge  any   import              js d3gauge js   export class MemMonComponent       createMemGauge             new drawGauge this opt      drawGauge   is a function inside d3gauge js             If you use it in multiple files  you can create a d3gauage d ts file with the content below  declare var drawGauge  any    and reference it in your boot ts  bootstrap  file at the top  like this      lt reference path     path to d3gauage d ts   gt

User · Answer

1  First Insert JS file path in an index html file      lt script src  assets video js  type  text javascript  gt  lt  script gt   2  Import JS file and declare the variable in component ts     import              assets video js   declare var RunPlayer  any    NOTE  Variable name should be same as the name of a function in js file   3  Call the js method in the component   ngAfterViewInit         setTimeout      gt            new RunPlayer

User · Answer

For  js files that expose more than one variable  unlike drawGauge   a better solution would  be to set the Typescript compiler to process  js files   In your tsconfig json  set allowJs option to true    compilerOptions                   allowJs   true               Otherwise  you ll have to declare each and every variable in either your component ts or d ts

[javascript] Angular 2: import external js file into component

Examples related to javascript

Examples related to angular

Examples related to webpack