将 vis.js 与 materialize 一起使用：Uncaught TypeError: Hammer.assign is not a function

Question

我正在尝试在配置了 Angular-cli 且已经在使用 Materialize-css 的 Angular4 项目中运行 vis.js

运行 Angular 应用程序时，我在控制台中收到此错误：

Uncaught TypeError: Hammer.assign is not a function
    at propagating (vis.js:37731)
    at Object.<anonymous> (vis.js:1915)
    at __webpack_require__ (vis.js:57)
    at Object.<anonymous> (vis.js:34498)
    at __webpack_require__ (vis.js:57)
    at Object.<anonymous> (vis.js:28975)
    at __webpack_require__ (vis.js:57)
    at exports.__esModule (vis.js:100)
    at vis.js:103
    at webpackUniversalModuleDefinition (vis.js:30)

在 package.json 中：

"vis": "4.21.0",
"jquery": "^2.2.4",
"hammerjs": "^2.0.8",
"materialize-css": "^0.100.2",
"angular2-materialize": "^15.1.10",

在 angular-cli.json 中

"styles": [
        "../node_modules/materialize-css/dist/css/materialize.css",
        "../node_modules/vis/dist/vis.min.css",
        "assets/scss/main.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/hammerjs/hammer.js",
        "../node_modules/materialize-css/dist/js/materialize.js",
        "../node_modules/vis/dist/vis.min.js"
      ],

我检查 hammerjs、jquery、vis 和 ma​​terialize 并正确安装并显示在 /node_modules目录

hammerjs、jquery 和 ma​​terialize 已在项目中安装并运行。这是一个简单的网站。

---

知道什么会导致这个错误以及如何纠正它吗？

Answer 1

这是一个很难回答的问题，因为您没有提供Minimal, Complete, and Verifiable example。

从您的问题看来，您无法让 vis.js 库在 Angular 4 应用程序中工作。让vis.js 在 Angular 4 中工作非常简单。以下是我遵循的步骤：

• 使用 cli ng new ng-vis 创建一个新项目
• 安装 vis 库及其类型npm install --save vis @types/vis
• 在项目中添加 vis 样式
  • 在.angular-cli.json 文件中将"../node_modules/vis/dist/vis.css" 添加到样式数组中（如上所示）

• 将 vis 添加到视图/视图模型

  • 我将src/app/app.component.html 更新为<div #vis></div>

  • 然后我将src/app/app.component.ts 更新为以下内容

    import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
    
    import * as vis from 'vis';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements AfterViewInit {
    @ViewChild('vis') element: ElementRef;
    network: vis.Network;
    
    ngAfterViewInit(): void {
      const nodes = new vis.DataSet([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
      ]);
    
      const edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
      ]);
    
      const data = {
        nodes: nodes,
        edges: edges
      };
    
      const options = {};
    
      this.network = new vis.Network(this.element.nativeElement, data, options);
     }
    }
    

您似乎手动将外部脚本添加到 .angular-cli.json 文件中，我认为这不是最佳做法。通过使用 Typescript，您将获得其类型系统的可探索性以及其他一些好处。类型和某些注释允许 Angular 帮助管理依赖项的加载（可能是您在上面描述的问题的原因），并允许构建系统在执行 AOT 和 tree-shaking 时做出更明智的决策。

更新 根据Ramesh Rajendran 的评论，错误可能来自在同一个项目中同时使用materialize-css 和vis.js。从他的评论和引用的 GitHub 问题中可以看出，您应该只需要更新您的 .angular-cli.json 文件以具有以下脚本：

  "scripts": [
    "../node_modules/vis/dist/vis.min.js",
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/hammerjs/hammer.js",
    "../node_modules/materialize-css/dist/js/materialize.js
  ]

我再次提醒您不要使用这种方法，因为它似乎不符合最佳做法。我更新了我的示例以同时使用materialize-css 和vis.js，如下所示：

• 运行npm install --save materialize-css @types/materialize-css

• 更新app.component.html

  <div #vis></div>
  
  <ul #collapse class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
  

• 更新`app.component.ts'

  import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
  
  import * as vis from 'vis';
  import * as $ from 'jquery';
  import 'materialize-css';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    @ViewChild('vis') element: ElementRef;
    @ViewChild('collapse') c_element: ElementRef;
    network: vis.Network;
  
    ngAfterViewInit(): void {
      const nodes = new vis.DataSet([
          {id: 1, label: 'Node 1'},
          {id: 2, label: 'Node 2'},
          {id: 3, label: 'Node 3'},
          {id: 4, label: 'Node 4'},
          {id: 5, label: 'Node 5'}
      ]);
  
      const edges = new vis.DataSet([
          {from: 1, to: 3},
          {from: 1, to: 2},
          {from: 2, to: 4},
          {from: 2, to: 5}
      ]);
  
      const data = {
          nodes: nodes,
          edges: edges
      };
      const options = {};
  
      this.network = new vis.Network(this.element.nativeElement, data, options);
      $(this.c_element.nativeElement).collapsible();
    }
  }