Angular - 'Tidak dapat menemukan HammerJS'

Saya sedang mengerjakan proyek bersudut sederhana di mana saya mencoba mengimpor Desain Material ke dalam proyek saya tetapi beberapa komponen tidak berfungsi dengan baik dan peringatan konsol mengatakan:

Tidak dapat menemukan HammerJS. Komponen Material Angular tertentu mungkin tidak bekerja dengan benar.

Saya telah hammerjsmenginstal dan juga @angular/material. Bagaimana cara mengatasi masalah ini?

Sidenote

Perlu dicatat bahwa jika Anda telah hammerjsmenginstal dan komponen Anda masih tidak dirender dengan benar untuk memastikan Anda menggunakan angular material komponen dan bukan elemen html dengan materialize-css kelas . Jika Anda sedang menggunakan materialize-cssbukan angular material, Anda akan perlu untuk menambahkannya ke proyek Anda secara terpisah.

Di package.jsonfile Anda, tambahkan ini kedependencies

"hammerjs": "^ 2.0.8",

Atau jika Anda menginginkan cara otomatis alternatif, Anda dapat mengetik npm i hammerjs --save(atau npm i [email protected] --savejika Anda ingin, karena 2.0.8versi terbaru sekarang) di folder proyek root Anda dan uji kemudian, jika masalah masih terjadi coba hapus node_modulesfolder dan instal ulang di root folder proyek juga dengan menjalankan npm installyang akan memeriksa dependencies(di mana hammerjsberada ), devDependencies..., dalam package.jsonfile dan menginstalnya.

Juga di Anda polyfills.ts(disarankan untuk memilikinya jika Anda belum)

mengimpor 'hammerjs / hammer';

Jadi, itu akan ditemukan saat aplikasi sudut Anda dijalankan karena polyfills.tsitu sendiri dipanggil oleh impor (dalam kasus normal, jika tidak Anda dapat memeriksanya) di main.tsmana titik masuk aplikasi sudut.

Pasang hammerjs

• dengan npm

  npm install --save hammerjs

• (atau) dengan benang

  yarn add hammerjs

Kemudian impor hammerjsdi titik masuk aplikasi Anda (mis. Src / main.ts).

import 'hammerjs';

Di systemjs.config.jsfile Anda, Anda juga perlu menambahkan entri berikut:

'hammerjs': 'npm:hammerjs/hammer.js',

bersama dengan tentu saja:

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

Hal lain yang hilang dari kode Anda (setidaknya berdasarkan apa yang Anda miliki di repo GH) adalah penyertaan CSS Desain Material, tambahkan ini ke index.htmlfile Anda :

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

Saya harap ini membantu.

ini bekerja untuk saya (dan ini dengan ionic4 juga) saya bisa membuat hammer.js bekerja - dan juga ionic dengan material.angular.io (di bawah)

Palu + ionik (palu + sudut juga):

npm install --save hammerjs
npm install --save @types/hammerjs

kemudian

package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",

kemudian

tsconfig.json - added types as seen below

"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

kemudian

in app.component.ts (only there)
import 'hammerjs';

kemudian

in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file

Kode sampel dari karya situs hammerjs

let element2 = document.getElementById('myElement');
let hamming = new Hammer(element2);
hamming.on("panleft panright tap press pressup", function(ev) {
    element2.textContent = ev.type +" gesture detected.";
    console.log(ev.type +" gesture detected.");
});

Hammer + material + ionic +: untuk membuat material hammer bekerja dengan ionic

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

dan voila, slider material Anda berfungsi.

Buka baris perintah atau PowerShell Anda, ketik direktori proyek angular2 Anda:, cd your-project's-roottekan enter dan paste:

npm install hammerjs --save

Npm secara otomatis akan menambahkan semua dependensi ke dalam package.jsonfile Anda .

1. npm install hammerjs --save
2. npm install @ types / hammerjs --save-dev

3. tambahkan ini ke typescript.config di bawah opsi kompiler

   "jenis": ["hammerjs"]

4. tambahkan ini ke app.components.ts:

Pasang dengan

npm install --save hammerjs

atau

yarn add hammerjs

Setelah menginstal, impor di titik masuk aplikasi Anda (mis. Src / main.ts).

import 'hammerjs';

Panduan Memulai Material Angular