Use external javaScript library in angular application

前端未结

关注

 6  392

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 w

相关标签:

6条回答

傲寒

2020-11-30 06:12
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/#
0 讨论(0)
发布评论:

提交评论
- 加载中...
花落未央

2020-11-30 06:14
You can try to find your type definitions from :

Definitly Typed Github Page

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
    }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘掉有多难

2020-11-30 06:24
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-11-30 06:27
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
  ],
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-11-30 06:27
Try this:
```
declare const Timeline; 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-11-30 06:30
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'
```
0 讨论(0)
发布评论:

提交评论
- 加载中...