Vis-timeline 7 和 Angular 11

Question

我已经在 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。

Answer 1

我最近刚刚开始使用 vis-timeline，并尝试使用最新版本，然后安装所有必需的对等依赖项。编译完成后，我遇到了运行时问题，例如“每当我单击可编辑事件时，无法读取未定义的属性“get”（注意：几天前，这was也发生在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

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

Answer 3

vis-[数据|时间轴] 7 和 Angular 16，对我有用的是：

• npm i vis-data vis-timeline

  （截至撰写本文时，相对数据：^7.1.7 和相对时间线：^7.7.2）

• 开

  styles.scss

  ：

  @import "vis-timeline/dist/vis-timeline-graph2d.min.css";

• 在组件的 HTML 模板上：

  ... < div id="blah"></div> ...

• 在组件上：

    import { DataSet } from 'vis-data';
    import {
      DataGroup,
      DataItem,
      Timeline,
      TimelineOptions,
      TimelineOptionsTemplateFunction,
      TimelineTooltipOption,
    } from 'vis-timeline';
    import { DateType } from 'vis-timeline/types';
    
    ...
    
    export class BlahComponent implements AfterViewInit {
      constructor(private _renderer: Renderer2) {}
    
      ngAfterViewInit() {
        this.timeline = new Timeline(
          this._renderer.selectRootElement('blah'),
          items, // read vis-timeline docs on how to set this up
          groups, // read vis-timeline docs on how to set this up
          options, // read vis-timeline docs on how to set this up
        );
     
     ...

• 在组件的 SCSS 上：我正在使用

  ::ng-deep

  覆盖 vis-timeline 中的 CSS