在 Angular 应用程序中使用外部 javaScript 库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44945766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use external javaScript library in angular application
提问by Adrien
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.
我有一个角4应用和我有在一个JavaScript文件创建的JavaScript组件：timeline.js。javascript 组件运行良好，但我想将它与 angular 4 一起使用。因此，我将我的 js 文件放在文件夹中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 :
在文件中index.html，我用<script src="assets/js/timeline.js"></script>和 in调用我的 js 文件app.component.ts，我有：
var timeline = new Timeline("timelineVisualization")
So, normally, the timeline is created in the div which has id="timelineVisualization".
因此，通常，时间线是在具有id="timelineVisualization".
But it doesn't work and I have an error on the new Timeline: Cannot find name Timeline.
但它不起作用，我有一个错误new Timeline：找不到名称时间轴。
So, do you know how I can do to call the Timeline constructor from timeline.js?
那么，您知道如何从 调用 Timeline 构造函数timeline.js吗？
回答by Deblaton Jean-Philippe
回答by Srikkant Srinivasan
Just extending on the aboveanswer 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.
只是扩展@Deblaton Jean-Philippe的上述答案，作为一般的良好做法，最好将您的 js 或其他 css 文件作为构建的一部分，而不是将它们放在您的 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
],
回答by Paul Cheriyan
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';
在 HTML 中添加
<html lang="en"> <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> </script> <head> </head> <body> <app-root></app-root> </body> </html>添加 angular.json 或 .angular-cli.json
"scripts": [ "../node_modules/jsplugin/dist/js/plugin.js", //Other script files ],添加组件
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'
在组件中添加
import { OnInit } from '@angular/core'; declare var library: any;在类型定义 (*.d.ts) 中。如果 src/typings.d.ts 不存在，则创建，否则，打开它，并将您的包添加到其中
declare module 'your-library'
回答by Faly
Try this:
尝试这个：
declare const Timeline;
回答by Volkan Se?kin Akbay?r
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.
如果你找不到你的库，你可以自己编写你的接口（并尝试将它的请求拉到其他开发者的 github 页面），这个接口就像一个 .ts 文件。
Here is a start
这是一个开始
declare global {
interface Window {
Timeline: any
}
}
