在 Angular 应用程序中使用外部 JavaScript 库答案

【问题标题】：Use external javaScript library in angular application在 Angular 应用程序中使用外部 JavaScript 库
【发布时间】：2017-07-06 10:01:10
【问题描述】：

我有一个 Angular 4 应用程序，我有一个在 javascript 文件中创建的 javascript 组件：timeline.js。 javascript 组件运行良好，但我想将它与 angular 4 一起使用。所以，我将我的 js 文件放在文件夹 assets/js/timeline.js 中。

在文件index.html 中，我用<script src="assets/js/timeline.js"></script> 调用我的js 文件，在app.component.ts 中，我有：

var timeline = new Timeline("timelineVisualization")

因此，通常情况下，时间线是在具有id="timelineVisualization" 的 div 中创建的。

但它不起作用，我在new Timeline 上有一个错误：找不到名称时间轴。

那么，你知道如何从timeline.js 调用 Timeline 构造函数吗？

【问题讨论】：

标签： javascript angular

【解决方案1】：

你只需要这样做

 import * as Timeline from '../assets/js/timeline.js';

您也可以这样做（在文件顶部）：

declare var Timeline: any;

还可以查看 below 了解良好做法。

【讨论】：

好的，谢谢，它适用于declare var Timeline: any;
如果我使用您建议的方法，是否仍需要按照@Srikkant Srinivasan 的回答中的建议在 .json 文件的“脚本”部分中包含库的路径？
是的，您需要一种从应用程序中下载该脚本的方法。不好的方法是把它放到你的 index.html 中，好的方法是把它放到你的 package.json 中
运行时显示未定义
@MustafaKunwa 你读过下面的 Srikkant Srinivasan 的回答吗？事情可能是您还需要某种方法将脚本包含到您的页面中。

【解决方案2】：

只是扩展@Deblaton Jean-Philippe 的above 答案，作为一般的良好做法，最好将您的 js 或其他 css 文件作为构建的一部分，而不是将它们放入您的 index.html .

如果您使用的是捆绑器，请使用类似的东西。

  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],

【讨论】：

【解决方案3】：

在 Angular2+ 中添加外部 javaScript 库有 4 种方法。例如：npm 中的 tinymce 库

1.将 lib 添加到 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。将库添加到 Angular.json：

从 npm 安装 tinymce：

npm i tinymce

将 *.js 添加到 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.在 TypeScript 中导入 javaScript 文件：

从 npm 安装 tinymce：

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方式（我喜欢）：

在 https://www.typescriptlang.org/dt/search?search=tinymce 搜索 typeScript 标头 *.d.ts 以查找 tinymce

然后安装：

   npm i @types/tinymce --save-dev

添加 tinymce.min.js 到 Angular 按照上面的第一种或第二种方式。

*.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';

你可以跳转tinymce的功能。 tinymce lib的代码很容易阅读

以上四种方式：

使用带有 javaScript 语法的 tinymce。例如tinymce lib中的指南：https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#

【讨论】：

【解决方案4】：

扩展上面的答案一点

我们可以用不同的方式将库添加到项目中

在 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';

第二件事是声明库的名称

添加组件

 import { OnInit } from '@angular/core';
 declare var library: any;

在类型定义（*.d.ts）中。如果 src/typings.d.ts 不存在则创建，否则，打开它，并将你的包添加到其中
```
declare module 'your-library'
```

【讨论】：

控制器是什么意思？
对不起@Mohamed。我的意思是组件
这在 Angular 9 中仍然有效吗？升级后，我们得到ERROR ReferenceError: [LIBRARY] is not defined
此方法适用于 Angular 9。您的问题与将库文件添加到项目有关。
这个方法对我不起作用。 ERR "libraryname" 未定义

【解决方案5】：

试试这个：

declare const Timeline;

【讨论】：

指定类型不是更好吗，即使它只是any？我认为 TypeScript 的基本要点是为事物分配类型...

【解决方案6】：

您可以尝试从以下位置找到您的类型定义：

Definitly Typed Github Page

如果您找不到您的库，您可以自己编写接口（并尝试将请求拉到 github 页面以供其他开发人员使用），该接口将像 .ts 文件一样工作。

这是一个开始

declare global {
    interface Window { 
        Timeline: any
    }
}

【讨论】：