Menu
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,
.ensure can't be resolved.
615
We can include a JavaScript file in another JavaScript file using the native ES6 module system. This allows us to share code between different JavaScript files and achieve modularity in the code. There are other ways to include a JS file like Node JS require, jQuery's getScript function, and Fetch Loading.
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"/>
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./assets/testjs.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
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
<h1>
<button (click)='f()'>Test</button>
</h1>
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:
js file in assets/js
.angular-cli.json - add the file path under scripts:
[../app/assets/js/test.js]
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()
15
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
