사용 vis.js : catch되지 않은 형식 오류 : 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에서

"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와, 마주 및 이 정확하게는

hammerjs를 설치하고 /node_modules 디렉토리에 실현, JQuery와 및 가가 이미 설치했다가 실현되었는지 확인 프로젝트에서 일하고 있습니다. 어느 것이 간단한 웹 사이트입니다.

---

어떤 오류가 발생할 수 있으며이를 수정하는 방법은 무엇입니까?

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 파일에서 프로젝트에
  • 을 마주 스타일을 추가 마주 라이브러리와 typings를 설치 CLI를 사용하여 새 프로젝트를 만듭니다 스타일 배열에 "../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>에 나는 업데이트

• 뷰/뷰 - 모델에 마주 추가 외부 스크립트를 .angular-cli.json 파일에 추가하면 가장 실용적이지 않을 것이라고 생각합니다. 이자형. Typescript 활용을 통해 유형 시스템의 탐색 가능성과 몇 가지 다른 이점을 얻을 수 있습니다.유형 및 특정 주석은 Angular가 종속성로드를 관리하는 데 도움이되며 (위에서 설명한 문제점의 원인 일 수 있음) AOT 및 트리 - 떨림을 수행 할 때 빌드 시스템이보다 현명한 결정을 내릴 수있게합니다. Ramesh Rajendran의 주석 사항에 따라

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