Question

我试图在使用已经使用Materialise-css的Angular-cli配置的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 和具体化并正确安装并显示在{{1目录

hammerjs ， jquery 和具体化已经安装并在项目中工作。这是一个简单的网站。

知道什么可能导致此错误以及如何纠正错误？

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

<强>更新根据{{3}}的评论，错误可能来自同一项目中的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＆＃39;

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

将vis.js与materialize一起使用：Uncaught TypeError：Hammer.assign不是函数

1 个答案: