Use vis.js with materialize : Uncaught TypeError: Hammer.assign is not a function

Question

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

当运行连接 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 和实现并正确安装并出现在 /node_modules 目录中

hammerjs、jquery 和 materialize 已经安装并运行该项目。这是一个简单的网站。

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

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 添加到 view/view-model

我将 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 和摇树时做出更明智的决策。

更新根据 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();
  }
}

Use vis.js with materialize : Uncaught TypeError: Hammer.assign is not a function

Use vis.js with materialize : Uncaught TypeError: Hammer.assign is not a function

angular

typescript

materialize

hammer.js

vis.js