如何以角度导入非 npm 依赖项答案

【问题标题】：How to Import non npm dependency in angular如何以角度导入非 npm 依赖项
【发布时间】：2018-01-10 04:38:29
【问题描述】：

我正在处理 Angular 5 项目，希望创建应用程序系统内部连接的可视化（类似于流程图，其中可以拖动服务器、mq、db 等系统内部组件并建立连接）组件。从 jsplumb 社区版 (link) 开始做同样的事情。能够成功地将 jsplumb 集成到 Angular 5 应用程序中。唯一的缺点是我们无法在运行时创建新元素（即拖放项目并创建连接）。这在工具包许可版本中是可能的。我不考虑与之合作。

所以正在研究 js-graph-it (link) js-graph-it 是一个旧项目，可以很好地与简单的 html 页面配合使用。我在将 js-graph-it.js 文件注入 angular 项目时遇到问题。由于它是非 npm 文件，因此它没有被定义，并且如果使用像 import { jsgt } from '../../assets/jsgraphit/js 这样的语法，系统将无法识别它。如果您观察我已将文件放在我的资产文件夹中。 第一个问题是，如果 npm 中不存在 3rd 方 js 文件，这该放在正确的位置吗？ 如何导入或正确导入 npm 中不存在的此类文件？

【问题讨论】：

我的 Jasper Visualize.js lib 项目中存在同样的问题......你有机会找到解决方案吗？目前我正计划创建自己的 npm 依赖项，但这样做非常繁重！

标签： javascript angular5 jsplumb

【解决方案1】：

您可以将第 3 方 JS 文件导入您的项目，并通过 CLI 将它们捆绑到您的 angular-cli.json 配置文件中的 scripts 数组中。

这将使它们成为全局范围的一部分（例如，在 window 对象上可用），就像您通过 <script> 标记导入它一样。

您还可以通过styles 和assets 属性在配置文件中包含任何CSS 文件或库的其他资产部分。

我认为您管理这些 3rd 方库的正确方法是将它们存储在您的资产目录中，就像您已经在做的那样。

【讨论】：