Question

我有一个角度4应用程序，我有一个javascript组件，我在javascript文件中创建：timeline.js。 javascript组件运行良好，但我想使用角度为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调用时间轴构造函数吗？

Answer 1

你只需要做

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

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

declare var Timeline: any;

还检查below是否有良好做法。

Answer 2

只需延伸@Deblaton Jean-Philippe的above答案，作为一般的良好做法，最好将js或其他css文件作为构建的一部分包含在内，而不是将它们放在索引中html的。

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

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

Answer 3

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

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。将lib添加到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

中搜索tinymce的typeScript标头* .d.ts

然后安装：

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

Answer 4

试试这个：

declare const Timeline;

Answer 5

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

Definitly Typed Github Page

如果找不到你的库，你可以自己编写你的接口（并尝试将请求拉到其他开发人员的github页面），这个接口就像一个.ts文件。

这是一个开始

declare global {
    interface Window { 
        Timeline: any
    }
}

Answer 6

扩展到答案之上

我们可以通过其他方式将库添加到项目中

添加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'
```

在角度应用程序中使用外部javaScript库

6 个答案: