在角度应用程序中使用外部 javaScript 库
[英]Use external javaScript library in angular application
问题描述
I have an angular 4 application and I have a javascript component that I created in a javascript file: timeline.js .
我有一个 angular 4 应用程序，并且有一个在 javascript 文件中创建的 javascript 组件： 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 . 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>调用我的 js 文件，在app.component.ts中，我有：
var timeline = new Timeline("timelineVisualization")
So, normally, the timeline is created in the div which has id="timelineVisualization" .因此，通常情况下，时间线是在具有id="timelineVisualization"的 div 中创建的。
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.js调用 Timeline 构造函数吗？
6 个解决方案
解决方案1
61 已采纳 2017-07-06 10:10:35
解决方案2
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.只是扩展@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
],
解决方案3
19 2020-09-13 04:00:45
There are 4 ways to add external javaScript libraries in Angular2+.在 Angular2+ 中有 4 种方法可以添加外部 javaScript 库。 for example: tinymce lib in npm例如：npm 中的 tinymce 库
1. add lib to index.html: 1. 将 lib 添加到 index.html：
<script src="assets/tinymce.min.js"></script>
*.component.ts: *.component.ts:
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;
2. add lib to Angular.json: 2. 将库添加到 Angular.json：
install tinymce from npm:从 npm 安装 tinymce：
npm i tinymce
add *.js to angular.json:添加 *.js 到 angular.json：
"scripts": ["node-modules/tinymce/tinymce.min.js"]
*.component.ts: *.component.ts:
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;
3. import javaScript file in TypeScript: 3. 在 TypeScript 中导入 javaScript 文件：
install tinymce from npm:从 npm 安装 tinymce：
npm i tinymce
*.component.ts: *.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): 4.TypeScript方式（我喜欢）：
search typeScript header *.d.ts for tinymce at https://www.typescriptlang.org/dt/search?search=tinymce在https://www.typescriptlang.org/dt/search?search=tinymce上搜索 tinymce 的 typeScript 标头 *.d.ts
then install:然后安装：
npm i @types/tinymce --save-dev
add tinymce.min.js to Angular follow the 1st or 2nd way above.按照上面的第一种或第二种方式将tinymce.min.js添加到 Angular。
*.component.ts: *.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.你可以跳转tinymce的功能。 it is very easy to read code of tinymce lib非常容易阅读tinymce lib的代码
after all 4 ways above:毕竟以上 4 种方式：
use tinymce with javaScript syntax.使用带有 javaScript 语法的 tinymce。 for example, the guide in tinymce lib: https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#例如，tinymce lib 中的指南： https ://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#
解决方案4
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 中添加<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
添加 angular.json 或 .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
在类型定义 (*.d.ts) 中。如果 src/typings.d.ts 不存在则创建，否则打开它，并将您的包添加到其中declare module 'your-library'
解决方案5
0 2017-07-06 10:12:00
Try this:试试这个：
declare const Timeline;
解决方案6
0 2017-07-06 10:13:40
You can try to find your type definitions from:您可以尝试从以下位置找到您的类型定义：
Definitly Typed Github Page 明确类型的 Github 页面
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
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.