Use external javaScript library in angular application

Solution 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.

Solution 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
  ],

Solution 3:

There are 4 ways to add external javaScript libraries in Angular2+. for example: tinymce lib in npm

1. add lib to index.html:

<script src="assets/tinymce.min.js"></script>

*.component.ts:

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

2. add lib to Angular.json:

install tinymce from npm:

npm i tinymce

add *.js to angular.json:

"scripts": ["node-modules/tinymce/tinymce.min.js"]

*.component.ts:

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

3. import javaScript file in TypeScript:

install tinymce from npm:

npm i tinymce

*.component.ts:

//tinymce: is a variable in 'tinymce.min.js' file => dont need "declare let tinymce"
import * as tinymce from 'tinymce/tinymce.min.js'; // "js" at the end is important

4.TypeScript way (I likes it):

search typeScript header *.d.ts for tinymce at https://www.typescriptlang.org/dt/search?search=tinymce

then install:

   npm i @types/tinymce --save-dev

add tinymce.min.js to Angular follow the 1st or 2nd way above.

*.component.ts:

// tinymce module at 'node-modules/@types/tinymce'
// 'node-modules/@types/tinymce'is just header, so it isn't compiled with angular
// don't need to use "declare let tinymce"
import * as tinymce from 'tinymce';

you can jump functions of tinymce. it is very easy to read code of tinymce lib

after all 4 ways above:

use tinymce with javaScript syntax. for example, the guide in tinymce lib: https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#