Vis-timeline 7 和 Angular 11

如何解决Vis-timeline 7 和 Angular 11

我在 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 中，我会得到更多模糊的错误。

关于如何在 Angular 中使用 vis-timeline 7 有什么建议吗？

我使用的是 Angular 11.2.8 和 Node 14.16.1。

解决方法

我最近刚开始使用 vis-timeline，并且尝试使用最新版本，然后安装所有必需的对等依赖项。一旦我编译了它，我就会遇到运行时问题，比如每当我点击一个可编辑的事件时，“无法读取未定义的属性 'get”（注意：这 在 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）

,

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