Use external javaScript library in angular application
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.
Extending above answers a bit more
we can add the library to the project in a different way
Adding in HTML
<html lang="en"> <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> </script> <head> </head> <body> <app-root></app-root> </body> </html>
Adding in angular.json or .angular-cli.json
"scripts": [ "../node_modules/jsplugin/dist/js/plugin.js", //Other script files ],
adding in component
import * as Timeline from '../assets/js/timeline.js';
the second thing is declaring the name of the library
add in the component
import { OnInit } from '@angular/core'; declare var library: any;
in type definition (*.d.ts).Create if the src/typings.d.ts does not exist, otherwise, open it, and add your package to it
declare module 'your-library'
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/#
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
],