可见时间线 7 和 Angular 11答案

【问题标题】：Vis-timeline 7 and Angular 11可见时间线 7 和 Angular 11
【发布时间】：2021-07-08 20:43:59
【问题描述】：

我已经在 Angular 中成功使用 vis-timeline 6.5.2 有一段时间了。

在我的 package.json 依赖项中，我有 "vis-timeline": "^6.5.2"

在我的打字稿文件中，我有import { Timeline, DataSet } from 'vis-timeline';

一切正常。

现在，我正在尝试升级到版本 7.4.7。我更改了 package.json 中的版本并运行了npm install。

首先，我的导入语句中断

Module '"../../../../node_modules/vis-timeline/declarations"' declares 'DataSet' locally, but it is not exported

我可以通过将导入更改为 import { Timeline, DataSet } from 'vis-timeline/standalone'; 来解决此问题，但我不知道这样做是否正确。

当我尝试使用 ng s 运行项目时，出现以下错误：

Error: ./node_modules/vis-timeline/peer/umd/vis-timeline-graph2d.min.js  
Module not found: Error: Can't resolve 'vis-data/peer/umd/vis-data.js' in 'C:\Users\Ken\workspace\hatch-tools\node_modules\vis-timeline\peer\umd'

还有

Error: ./node_modules/vis-timeline/peer/umd/vis-timeline-graph2d.min.js
Module not found: Error: Can't resolve 'moment' in 'C:\Users\Ken\workspace\hatch-tools\node_modules\vis-timeline\peer\umd'

如果我将 moment 和 vis-data 添加到我的 package.json 中，我会得到更多模糊的错误。

关于如何让 vis-timeline 7 在 Angular 中工作的任何建议？

我在 Angular 11.2.8 和 Node 14.16.1 上。

【问题讨论】：

标签： angular vis.js vis.js-timeline

【解决方案1】：

我最近才开始使用 vis-timeline，并且明显尝试使用最新版本，然后安装所有必需的对等依赖项。一旦我得到它编译，我遇到了运行时问题，比如每当我点击一个可编辑的事件时“无法读取未定义的属性”（注意：这发生在几天前的 examples 页面上也是，但现在不是）

四处搜索后，我找到了这个帖子并将版本降级为6.5.2。然后我意识到 6.5.2 link 存在安全风险。

回到它，我挖掘并找到了他们解决上述安全问题的版本（7.4.4）。此版本没有我之前在运行时提到的相同问题。

我在 Angular 11.2.8 项目中成功使用了以下内容：

package.json

"vis-timeline": "7.4.4",
"@egjs/hammerjs": "2.0.17",
"keycharm": "0.4.0",
"moment": "2.29.1",
"propagating-hammerjs": "2.0.1",
"uuid": "7.0.3",
"vis-data": "7.1.2",
"vis-util": "4.3.4",
"xss": "1.0.8",

组件：

   import { DataSet } from 'vis-data/esnext';
   import { Timeline } from 'vis-timeline/esnext';

（您也可以从 'vis-timeline/standalone' 导入两者，但我们使用 webpack，因此 esnext 选项更适合我们的应用程序 - ref）

【讨论】：

我设法让 VIS 时间线在 Angular 12 下使用与上述相同的技巧运行。当心最新版本的 visjs (7.4.8) 对我不起作用并引发相同的错误。在你的 package.json 中保留 @Eric 的版本
感谢提供信息的人，我发现它确实可以使用 Angular 12 和最新的 vis-timeline。在这里演示stackblitz.com/edit/angular-ivy-uhmdx2
进行了一些故障排除并设法使其适用于具有最新 vis-timeline 的 V13。查看此仓库：github.com/benjaminv/angular-vis-timeline

【解决方案2】：

我今天的任务也是启动一个新的时间线，我也遇到了同样的问题。从头开始一个简单的角度项目以隔离所有内容，并且必须在 vis-data、vis-util 和 moment 上运行“npm i”，这些都是通过安装时间线来实现的。即使在安装了这些之后，我也收到了 XSS 命名空间和hammerJs 的错误（做了一个'npm ihammerjs'并且仍然得到错误）。我必须恢复到与您以前使用的版本相同的版本。此版本需要先修复才能使用。

【讨论】：