Angular 2: import external js file into component

Bing Lu :

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.
Ankit Singh :

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"/>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Using external js file in angular 6 component

How to import external jquery file in component of angular 6?

Import external js File in Angular 4 and access functions and variables

Call a function of external js file in angular 5 component

Calling a method in an angular Component from an external JS file

import external js into only one component

Include external component in angular 2

Import js component into Angular 5

How can I add external JS file in Angular CLI component, specific to the component only?

Angular2 AOT Compilation with static external js file

angular 2 referencing external js file in index.html

Import template in Vuejs single file component as an external HTML file

How to implement an external script file in an Angular component?

HTML: using external .js file with import statements

Waiting for external js file in child component

Angular 2 - import of external leaflet typescript library

Import global LESS file in Angular's component

JavaScript function in external HTML file not invoked when an object is passed as parameter from an Angular2 component

How to import a Svelte component into a JS file

How to import external css file inside the react component file which is inside the component folder?

How to import a function from external JS file in Vue js?

Lazy import of external js file in ember.js

Adding an external JS file to Angular 5 CLI

Include External js file to angular 5.0.0 project

Angular 5: adding types to external JS file

External .js file in an Angular 8 project

Angular2 Component How to Import Directive Component?

How to import component into another root component in Angular 2

Angular 2-Cannot import another component in component declaration