在angular应用程序中使用外部javaScript库_Javascript_Angular

在angular应用程序中使用外部javaScript库

javascript angular

在angular应用程序中使用外部javaScript库,javascript,angular,Javascript,Angular,我有一个angular 4应用程序，还有一个在javascript文件中创建的javascript组件：timeline.js。javascript组件运行良好，但我想将其用于angular 4。因此，我将我的js文件放在文件夹assets/js/timeline.js中在文件index.html中，我用调用我的js文件，在app.component.ts中，我有： var timeline = new Timeline("timelineVisualization") 因此，通常情况下，时

我有一个angular 4应用程序，还有一个在javascript文件中创建的javascript组件：

timeline.js

。javascript组件运行良好，但我想将其用于angular 4。因此，我将我的js文件放在文件夹

assets/js/timeline.js

中

在文件

index.html

中，我用

调用我的js文件，在

app.component.ts

中，我有：

var timeline = new Timeline("timelineVisualization")

因此，通常情况下，时间线是在具有

id=“timelineVisualization”

的div中创建的

但它不起作用，我在

新时间轴上有一个错误：找不到名称时间轴
那么，您知道如何从Timeline.js
调用Timeline构造函数吗？
您只需要这样做
 import * as Timeline from '../assets/js/timeline.js';

您还可以（在文件顶部）执行以下操作：
还要检查良好做法。
尝试以下方法：
declare const Timeline; 

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

如果找不到库，您可以自己编写接口（并尝试将请求拉到其他开发人员的github页面），该接口的作用类似于.ts文件
这是一个开始
declare global {
    interface Window { 
        Timeline: any
    }
}

扩展@Deblaton Jean-Philippe的答案，作为一种普遍的良好实践，最好将js或其他css文件作为构建的一部分，而不是将它们放在index.html中
如果您使用的是bundler，请使用类似的工具
  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],

扩展上面的内容可以回答更多的问题
我们可以用不同的方式将库添加到项目中
添加HTML
<html lang="en">
 <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
 </script>
 <head>
 </head>
 <body>
   <app-root></app-root>
 </body>
</html>


添加组件
import * as Timeline from '../assets/js/timeline.js';

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


第二件事是声明库的名称
添加组件
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'


有4种方法可以在Angular2+中添加外部javaScript库。例如：npm中的tinymce库
1。将库添加到index.html:
<script src="assets/tinymce.min.js"></script>

2。将lib添加到Angular.json:
<script src="assets/tinymce.min.js"></script>

从npm安装tinymce：
npm i 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;

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

//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

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

3。导入类型脚本中的javaScript文件：
<script src="assets/tinymce.min.js"></script>

从npm安装tinymce：
npm i tinymce

npm i tinymce

*.component.ts：
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

//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

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

4.打字方式（我喜欢）：
<script src="assets/tinymce.min.js"></script>

搜索typeScript头*.d.ts以在
然后安装：
   npm i @types/tinymce --save-dev

将tinymce.min.js添加到Angular中，然后按照上面的第一条或第二条方法进行操作
*.component.ts：
// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

//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

// 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库的代码很容易阅读
以上四种方式之后：
<script src="assets/tinymce.min.js"></script>

将tinymce与javaScript语法结合使用。例如，tinymce库中的指南：
Ok谢谢，它与declare var Timeline:any一起工作
如果我使用您建议的方法，我是否仍需要按照@Srikkant Srinivasan的回答中的建议，在.json文件的“scripts”部分包含库的路径？是的，您需要一种从应用程序下载该脚本的方法。坏的方法是将其放入index.html，好的方法是将其放入package.jsonOn运行时undefined@MustafaKunwa你读过斯里坎特·斯里尼瓦桑下面的回答吗？问题很可能是，你还需要某种方式将脚本包含到你的页面中。你所说的控制器是什么意思？对不起@Mohamed。我是说组件这个在Angular 9中还能用吗？升级后，我们将获得错误引用错误：[LIBRARY]未定义
此方法将正常工作。您的问题与将库文件添加到项目有关。此方法不适用于我。ERR“libraryname”未定义指定类型不是更好吗，即使它只是任何类型？我认为TypeScript有一个基本点，将类型分配给事物。。。