我有一个角4应用和我有在一个JavaScript文件创建的JavaScript组件：timeline.js。javascript 组件运行良好，但我想将它与 angular 4 一起使用。因此，我将我的 js 文件放在文件夹中assets/js/timeline.js。
在文件中index.html，我用<script src="assets/js/timeline.js"></script>和 in调用我的 js 文件app.component.ts，我有：
var timeline = new Timeline("timelineVisualization")
因此，通常，时间线是在具有id="timelineVisualization".
但它不起作用，我有一个错误new Timeline：找不到名称时间轴。
那么，您知道如何从 调用 Timeline 构造函数timeline.js吗？
你只需要做
import * as Timeline from '../assets/js/timeline.js';
您还可以执行以下操作（在文件顶部）：
declare var Timeline: any;
另请查看下面的良好做法。
只是扩展@Deblaton Jean-Philippe的上述答案，作为一般的良好做法，最好将您的 js 或其他 css 文件作为构建的一部分，而不是将它们放在您的 index.html 中。
如果您使用的是捆绑器，请使用类似的东西。
"styles": [
"styles.scss",
//Other style files
],
"scripts": [
"../node_modules/jsplugin/dist/js/plugin.js",
//Other script files
],
有 4 种方法可以在 Angular2+ 中添加外部 javaScript 库。例如：npm 中的 tinymce lib
1. 在 index.html 中添加 lib：
<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 中添加 lib：
从 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的代码很容易阅读
毕竟以上4种方式：
使用带有 javaScript 语法的 tinymce。例如tinymce lib中的指南：https : //www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#
进一步扩展上述答案
我们可以以不同的方式将库添加到项目中
在 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'
试试这个：
declare const Timeline;