Angular 将vis.js与materialize:uncaughttypeerror:Hammer.assign一起使用不是函数

我正在尝试在Angular4项目中运行vis.js，该项目配置了AngularCLI，并且已经在使用MaterializeCSS

运行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)

在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\u modules

目录中

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

---

---

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

这是一个很难回答的问题，因为您没有提供答案

从您的问题来看，让

vis.js

库在Angular 4应用程序中工作似乎有困难。让

vis.js

在Angular 4中工作非常简单。以下是我遵循的步骤：

• 使用cli创建一个新项目

  ng new ng vis

• 安装vis库及其打字

  npm安装--保存vis@types/vis

• 将vis样式添加到项目中
  • 在

    .angular cli.json

    文件中，将

    ./node\u modules/vis/dist/vis.css“

    添加到样式数组中（如上所示）
• 将vis添加到视图/视图模型
  • 我将

    src/app/app.component.html

    更新为

  • 然后我将

    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和树抖动时做出更明智的决策

更新 根据的评论，错误可能来自于在同一个项目中同时使用

物化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
  ]

我再次提醒您不要使用这种方法，因为它似乎不符合最佳实践。我更新了我的示例，以使用

物化css

和

vis.js

，如下所示：

• 运行npm安装--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>
  

---

请检查：我已经检查了github上的相关问题，甚至发布了一个新问题，这个问题没有得到明确解决。这个问题没有得到回答，因为您需要提供更多信息。这是不可复制或验证的。@droid，这回答了你的问题吗？你需要进一步的澄清吗？对不起，我没有时间测试，但是你的答案看起来很完整，但是我花了相当多的时间为你写了这篇文章。如果你能复习一下，如果它确实回答了你的问题，就把它标记为已回答，那就太好了。

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

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();
  }
}