Saya mencoba menjalankan vis.js dalam proyek Angular4 yang dikonfigurasi dengan Angular-cli yang sudah menggunakan Materialize-css

Saat menjalankan aplikasi sudut saya mendapatkan kesalahan ini di konsol:

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)

Dalam package.json :

"vis": "4.21.0",
"jquery": "^2.2.4",
"hammerjs": "^2.0.8",
"materialize-css": "^0.100.2",
"angular2-materialize": "^15.1.10",

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

Saya memeriksa apakah hammerjs, jquery, vis dan mewujudkan dan dipasang dengan benar dan ada di direktori /node_modules

hammerjs, jquery dan materialize sudah terpasang dan berfungsi dalam proyek. Yang merupakan situs web sederhana.


Adakah gagasan apa yang dapat menyebabkan kesalahan ini dan bagaimana cara memperbaikinya?

-1
An-droid 16 November 2017, 13:25

1 menjawab

Jawaban Terbaik

Ini adalah pertanyaan yang sangat sulit untuk dijawab karena Anda tidak memberikan Contoh Minimal, Lengkap, dan Dapat Diverifikasi.

Tampaknya dari pertanyaan Anda bahwa Anda mengalami kesulitan untuk membuat pustaka vis.js berfungsi di aplikasi Angular 4. Membuat vis.js berfungsi di Angular 4 cukup mudah. Berikut adalah langkah-langkah yang saya ikuti:

  • Buat proyek baru dengan cli ng new ng-vis
  • Instal perpustakaan vis dan pengetikannya npm install --save vis @types/vis
  • Tambahkan gaya vis ke proyek
    • Dalam file .angular-cli.json tambahkan "../node_modules/vis/dist/vis.css" ke array gaya (seperti yang telah Anda tunjukkan di atas)
  • Tambahkan vis ke tampilan/model tampilan

    • Saya memperbarui src/app/app.component.html menjadi <div #vis></div>
    • Saya kemudian memperbarui src/app/app.component.ts menjadi berikut

      import { Komponen, ElementRef, ViewChild, AfterViewInit } dari '@angular/core';   impor * sebagai vis dari 'vis';   @Komponen({    pemilih: 'aplikasi-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']  })  kelas ekspor AppComponent mengimplementasikan AfterViewInit {  @ViewChild('vis') elemen: ElementRef;  jaringan: vis.Jaringan;   ngAfterViewInit(): batal {    const node = 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'}    ]);     tepi const = new vis.DataSet([      {dari: 1, ke: 3},      {dari: 1, ke: 2},      {dari: 2, ke: 4},      {dari: 2, ke: 5}    ]);     data konstan = {      simpul: simpul,      tepi: tepi    };     opsi const = {};     this.network = new vis.Network(this.element.nativeElement, data, opsi);   }  }  

Anda tampaknya menambahkan skrip eksternal secara manual ke file .angular-cli.json yang menurut saya bukan praktik terbaik. Dengan memanfaatkan TypeScript, Anda akan mendapatkan explorability dari sistem tipenya serta beberapa manfaat lainnya. Jenis dan anotasi tertentu adalah apa yang memungkinkan Angular membantu mengelola pemuatan dependensi (mungkin penyebab masalah yang Anda jelaskan di atas) dan memungkinkan sistem pembangunan untuk membuat keputusan yang lebih cerdas saat menjalankan AOT dan goyangan pohon.

PERBARUI Sesuai dengan komentar Ramesh Rajendran, ada kemungkinan kesalahan tersebut berasal dari penggunaan kedua materialize-css dan vis.js dalam proyek yang sama. Dari komentarnya, dan masalah GitHub yang direferensikan, tampaknya Anda hanya perlu memperbarui file .angular-cli.json Anda untuk memiliki skrip berikut:

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

Sekali lagi saya akan memperingatkan Anda terhadap pendekatan ini karena tampaknya tidak sejalan dengan praktik terbaik. Saya memperbarui contoh saya agar berfungsi dengan materialize-css dan vis.js sebagai berikut:

  • Jalankan npm install --save materialize-css @types/materialize-css
  • Perbarui 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>
    
  • Perbarui `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();
      }
    }
    
3
peinearydevelopment 21 November 2017, 16:05