Angular - „Nie można znaleźć HammerJS”

Pracuję nad prostym projektem kątowym, w którym próbuję zaimportować Material Design do mojego projektu, ale niektóre komponenty nie działają poprawnie, a ostrzeżenie konsoli mówi:

Nie można znaleźć HammerJS. Niektóre komponenty Angular Material mogą nie działać poprawnie.

Mam hammerjszainstalowany i również @angular/material. Jak rozwiązać ten problem?

Dygresja

Może warto zauważyć, że jeśli hammerjszainstalowałeś, a komponenty nadal nie renderują się poprawnie, upewnij się, że używasz angular material komponentów, a nie elementów html z materialize-css klasami . Jeśli są za pomocą materialize-csszamiast angular material, trzeba będzie dodać go do swojego projektu oddzielnie.

W swoim package.jsonpliku dodaj to dodependencies

"hammerjs": "^ 2.0.8",

Lub jeśli chcesz alternatywnego automatycznego sposobu, możesz po prostu wpisać npm i hammerjs --save(lub npm i [email protected] --savejeśli chcesz, ponieważ 2.0.8jest to najnowsza wersja obecnie) w głównym folderze projektu i przetestować, jeśli problem nadal występuje, spróbuj usunąć node_modulesfolder i ponownie zainstalować go w katalogu głównym folder projektu również przez uruchomienie, npm installktóre sprawdzi dependencies( gdzie hammerjsrezyduje ), devDependencies..., w package.jsonpliku i zainstaluje je.

Również w twoim polyfills.ts(zalecane, jeśli nie masz)

import „hammerjs / hammer”;

W ten sposób zostałby znaleziony, gdy twoja aplikacja kątowa jest wykonywana, ponieważ polyfills.tssama jest wywoływana przez import (w normalnym przypadku, inaczej możesz to sprawdzić), w main.tsktórym jest punktem wejścia aplikacji kątowej.

Zainstaluj hammerjs

• z npm

  npm install --save hammerjs

• (lub) z przędzą

  yarn add hammerjs

Następnie zaimportuj hammerjsdo punktu wejścia aplikacji (np. Src / main.ts).

import 'hammerjs';

W swoim systemjs.config.jspliku musisz również dodać następujący wpis:

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

wraz z oczywiście:

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

Inną rzeczą, której brakuje w twoim kodzie (przynajmniej na podstawie tego, co masz w repozytorium GH), jest włączenie CSS Material Design, dodaj to do swojego index.htmlpliku:

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

Mam nadzieję, że to pomoże.

to zadziałało dla mnie (i to też jest z ionic4), mogłem sprawić, że hammer.js zadziała - a także ionic z material.angular.io (na dole)

Młotek + jonowe (również młotek + kątownik):

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

następnie

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

następnie

tsconfig.json - added types as seen below

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

następnie

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

następnie

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

Przykładowy kod ze strony hammerjs działa

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 + ionic + material: aby materiał działał z jonami

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

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

i voila, twój suwak materiału działa.

Otwórz wiersz poleceń lub PowerShell, wpisz katalog swojego projektu angular2:, cd your-project's-rootnaciśnij Enter i wklej:

npm install hammerjs --save

Npm automatycznie doda wszystkie zależności do twojego package.jsonpliku.

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

3. dodaj to do typescript.config w opcjach kompilatora

   "types": ["hammerjs"]

4. dodaj to do app.components.ts:

Zainstaluj za pomocą

npm install --save hammerjs

lub

yarn add hammerjs

Po zainstalowaniu zaimportuj go do punktu wejścia aplikacji (np. Src / main.ts).

import 'hammerjs';

Przewodnik wprowadzający do materiałów kątowych