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.

Answer 2

Just extending on the above answer by @Deblaton Jean-Philippe and as a general good practice, it might be better to include your js or other css files as part of the build instead of putting them in your index.html.

If you are using a bundler, use something like this.

  "styles": [     "styles.scss",     //Other style files   ],   "scripts": [     "../node_modules/jsplugin/dist/js/plugin.js",     //Other script files   ],