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 ?
6 answers
solution1
61 ACCPTED 2017-07-06 10:10:35
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.
solution2
32 2017-07-06 10:16:16
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
],
solution3
19 2020-09-13 04:00:45
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/#
solution4
9 2018-08-30 11:48:50
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'
solution5
0 2017-07-06 10:12:00
Try this:
declare const Timeline;
solution6
0 2017-07-06 10:13:40
You can try to find your type definitions from:
If you cannot find your library, you can write your interfaces yourself (and try to pull request it to the github page for other developers) and this interface will act like a.ts file.
Here is a start
declare global {
interface Window {
Timeline: any
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.