Use external javaScript library in angular application

Question

I have an angular 4 application and I have a javascript component that I created in a javascript file : timeline.js. The javascript component works well but I want to use it with angular 4. So, I put my js file in the folder assets/js/timeline.js.

In the file index.html, I call my js file with <script src="assets/js/timeline.js"></script> and in app.component.ts, I have :

var timeline = new Timeline("timelineVisualization")

So, normally, the timeline is created in the div which has id="timelineVisualization".

But it doesn't work and I have an error on the new Timeline : Cannot find name Timeline.

So, do you know how I can do to call the Timeline constructor from timeline.js ?

Answer 1

you simply need to do

 import * as Timeline from '../assets/js/timeline.js';

You can also do (at the top of your file) :

declare var Timeline: any;

Check also below for good practices.