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

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。

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

Answer 1

你只需要做

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

您也可以这样做(在文件的顶部)：

declare var Timeline: any;

还可以查看下面的良好实践。

Answer 2

只需扩展@Deblaton对上图的回答，作为一般的良好实践，最好将js或其他css文件作为构建的一部分，而不是将它们放在index.html中。

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

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

Answer 3

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

1.向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 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 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.4.TypeScript方式(我喜欢)：

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

然后安装：

   npm i @types/tinymce --save-dev

加入tinymce.min.js到角度，沿着上面的第一或第二条路。

*.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 lib的代码。

以上四种方式都是：

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