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

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

  2. Adding in angular.json or .angular-cli.json

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

  3. adding in component

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

the second thing is declaring the name of the library

  1. add in the component

     import { OnInit } from '@angular/core';
 declare var library: any;

  2. 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
  ],

Tags:

Javascript

Angular

Recent Posts