Use external javaScript library in angular application

user_6687426 0
Viewed 72990

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 ?

angular javascript
6 Answers

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/#

user_24811530

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'
user_74693320
Related