javascript - 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

<script src="../../../../js/d3gauge.js"></script>

But it doesn't work, drawGaugecan't be found.

So,

1. what're correct steps to import an external js file to angular2?
2. 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.

Answer 1

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

///<reference path="../path/to/d3gauage.d.ts"/>