可视化时间线7和角度11

Question

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

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

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

一切正常。

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

首先，我的import语句与

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上。

Answer 1

我最近刚刚开始使用vis-timeline，并尝试使用最新版本，然后安装所有需要的对等依赖项。一旦我编译了它，我就遇到了运行时问题，比如每当我点击一个可编辑的事件时，我就会遇到诸如'Cannot read property 'get‘of undefined’这样的运行时问题(注意:几天前在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)

Answer 2

我今天的任务是启动一个新的时间表，我也看到了同样的问题。从头开始了一个简单的角度项目，以隔离所有的东西，并且不得不运行'npm i‘在vis-data，vis-util和moment上，所有这些都是通过安装时间线来实现的。即使在安装了这些之后，我仍然收到XSS命名空间和hammerJs的错误(我执行了'npm i hammerjs‘，但仍然收到错误)。我不得不恢复到你之前使用的相同版本。在可以使用之前，需要修复此构建。