Açısal - 'HammerJS bulunamadı'

Materyal Tasarım'ı projeme aktarmaya çalıştığım basit bir açısal proje üzerinde çalışıyorum, ancak bazı bileşenler düzgün çalışmıyor ve bir konsol uyarısı şunu söylüyor:

HammerJS bulunamadı. Bazı Açısal Malzeme bileşenleri düzgün çalışmayabilir.

Ben var hammerjsda yüklenmiş ve @angular/material. Bu sorunu nasıl çözerim?

Kenar notu

Bu değer belirterek olabileceğini sen varsa hammerjsyüklenir ve bileşenleri yine emin kullandığınız yapmak için doğru oluşturulmuyorsa angular material bileşenleri ile değil html elemanları materialize-css sınıflar . Eğer varsa vardır kullanarak materialize-cssyerine angular material, ayrı projenize eklemek gerekecektir.

Sizin de package.jsondosyaya bu eklemekdependencies

"hammerjs": "^ 2.0.8",

Veya alternatif bir otomatik yol istiyorsanız, kök proje klasörünüze yazabilir npm i hammerjs --save(veya npm i hammerjs@2.0.8 --saveisterseniz, 2.0.8günümüzün en son sürümü olduğu için) ve ardından sorun devam ederse, klasörü silmeyi ve köke yeniden yüklemeyi deneyin. Ayrıca proje klasörü çalışan tarafından kontrol edecektir ( Oturuyor ), ..., içinde dosya ve bunları yükleyin.node_modulesnpm installdependencieshammerjsdevDependenciespackage.json

Ayrıca içinde polyfills.ts(yoksa bir tane olması önerilir)

'hammerjs / hammer' ithalatı;

Böylece, beri açısal uygulama idam edilirken bulunacağını polyfills.tskendisi ithal tarafından çağrılan (başka bunu kontrol edebilirsiniz, normal bir durumda) içinde main.tshangi açısal uygulamalar giriş noktasıdır.

Hammerjs yükleyin

• ile NPM

  npm install --save hammerjs
  

• (veya) iplik ile

  yarn add hammerjs
  

Ardından hammerjsuygulamanızın giriş noktasına aktarın (ör. Src / main.ts).

import 'hammerjs';

Senin içinde systemjs.config.jsdosyaya ayrıca aşağıdaki giriş eklemek gerekir:

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

tabii ki ile birlikte:

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

Kodunuzda eksik olan diğer şey (en azından GH deposundaki şeye bağlı olarak), Materyal Tasarım CSS'sinin dahil edilmesidir, bunu index.htmldosyanıza ekleyin :

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

Umarım bu yardımcı olur.

bu benim için çalıştı (ve bu da ionic4 ile) Hammer.js'nin çalışmasını ve ayrıca material.angular.io (altta) ile iyonik olmasını sağlayabilirim

Çekiç + iyonik (aynı zamanda çekiç + köşeli):

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

sonra

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

sonra

tsconfig.json - added types as seen below

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

sonra

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

sonra

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

Hammerjs site çalışmalarından örnek kod

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

Çekiç + iyonik + malzeme: malzeme çekiçinin iyonik ile çalışmasını sağlamak için

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

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

ve işte, malzeme kaydırıcınız çalışıyor.

Komut satırınızı veya powershell'i açın, angular2 projenizin dizinini yazın:, cd your-project's-rootenter tuşuna basın ve yapıştırın:

npm install hammerjs --save

Npm, tüm bağımlılıkları package.jsondosyanıza otomatik olarak ekler .

1. npm hammerjs yükle - kaydet
2. npm install @ types / hammerjs --save-dev

3. bunu, derleyici seçenekleri altında typescript.config dosyasına ekleyin

   "türler": ["hammerjs"]

4. bunu app.components.ts'e ekleyin:

İle yükle

npm install --save hammerjs

veya

yarn add hammerjs

Yükledikten sonra, uygulamanızın giriş noktasına aktarın (ör. Src / main.ts).

import 'hammerjs';

Açısal Malzeme Başlangıç ​​Kılavuzu