使用vis.js：キャッチされない例外TypeError：Hammer.assignは、私はすでにマテリアライズ-CSSを使用している角度-CLIで設定さAngular4プロジェクトでvis.jsを実行しようとしている機能

Question

ない

とき角度のアプリケーションを実行している私は、コンソールにこのエラーが表示されます。

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

角度-cli.jsonで

私は hammerjsが、 jqueryの、 VISと はを実体と、 jqueryのと はを実体正しくインストールおよび /node_modulesディレクトリに存在

hammerjsがすでにインストールされていることを確認3210

"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" ], 

プロジェクトで働いています。どちらがシンプルなウェブサイトです。

---

このエラーが発生する可能性があり、修正する方法はありますか。

Answer 1

Minimal, Complete, and Verifiable exampleを提供していないため、これは非常に難しい質問です。

vis.jsライブラリをAngular 4アプリケーションで動作させることに問題があるようです。 vis.jsをAngular 4で動作させることは非常に簡単です。ここで私は、その後の手順は以下のとおりです。

• がng new ng-vis
• npm install --save vis @types/vis
• .angular-cli.jsonファイルでプロジェクトに
  • をVISスタイルを追加VISライブラリとそのタイピングをインストールCLIを使用して新しいプロジェクトを作成します。 styles配列に"../node_modules/vis/dist/vis.css"を追加してください（上に示した通り）

• 私はその後、手動であるように見える次

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

にsrc/app/app.component.tsを更新src/app/app.component.html<div #vis></div>から

を更新

• ビュー/ビューモデルにVIを追加します。外部スクリプトを.angular-cli.jsonファイルに追加すると、私はこれがベストプラクティスにはならないと思いますe。 Typescriptを利用することで、タイプシステムの探索可能性と他のいくつかの利点が得られます。型と特定の注釈は、Angularが依存関係のロード管理を支援するものであり（おそらく上で説明した問題の原因）、ビルドシステムがAOTやツリーシェイクを実行する際にスマートな決定を下すことができます。 Ramesh Rajendranのコメントを1として

  UPDATE 、エラーが同じプロジェクトにmaterialize-cssとvis.jsの両方を利用することから来ている可能性があります。それはしていないようとして

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

  が再び私はこのアプローチに対して、あなたを警告します：彼のコメント、および参照GitHubの問題から、それはあなただけで次のスクリプトを持っているあなたの.angular-cli.jsonファイルを更新する必要があります見るでしょうベストプラクティスに沿ったものでなければなりません。私は次のように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(); 
        } 
    }