Angular - 'HammerJS konnte nicht gefunden werden'

94

Ich arbeite an einem einfachen Winkelprojekt, bei dem ich versuche, Material Design in mein Projekt zu importieren, aber einige der Komponenten funktionieren nicht richtig und eine Konsolenwarnung lautet:

HammerJS konnte nicht gefunden werden. Bestimmte Winkelmaterialkomponenten funktionieren möglicherweise nicht richtig.

Ich habe hammerjsinstalliert und auch @angular/material. Wie löse ich dieses Problem?



Randnotiz

Es kann erwähnenswert sein, dass wenn Sie hammerjsinstalliert haben und Ihre Komponenten immer noch nicht korrekt gerendert werden, um sicherzustellen, dass Sie angular material Komponenten und keine HTML-Elemente mit materialize-css Klassen verwenden . Wenn Sie werden mit materialize-cssstatt angular material, müssen Sie es zu einem Projekt separat hinzuzufügen.

Danoram
quelle

Antworten:

162

package.jsonFügen Sie dies in Ihrer Datei hinzudependencies

"hammerjs": "^ 2.0.8",

Oder wenn Sie eine alternative automatische Methode wünschen, können Sie einfach npm i hammerjs --save(oder npm i [email protected] --savewenn Sie möchten, da dies 2.0.8die neueste Version ist) in Ihren Stammprojektordner eingeben und dann testen, ob das Problem weiterhin auftritt. Versuchen Sie, den node_modulesOrdner zu löschen und im Stammverzeichnis neu zu installieren Projektordner auch durch Ausführen, npm installwodurch überprüft wird, wodependencies ( wo sich hammerjsbefindet ), devDependencies..., in der package.jsonDatei und installiert werden.

Auch in Ihrem polyfills.ts(empfohlen, einen zu haben, wenn Sie nicht haben)

'Hammerjs / Hammer' importieren;

Daher wird es gefunden, während Ihre Winkel-App ausgeführt wird, da es polyfills.tsselbst durch Import aufgerufen wird (im Normalfall können Sie es auch überprüfen), in main.tsdem sich der Einstiegspunkt der Winkel-Apps befindet.

selem mn
quelle
9
Durch Hinzufügen der import-Anweisung wird polyfills.tsdie Warnung stummgeschaltet, was großartig ist! Aber die Materialdesignkomponenten werden immer noch nicht richtig gerendert: / Ich werde einen Screenshot in die Fragenbeschreibung aufnehmen. Vielen Dank für Ihre bisherige Hilfe!
Danoram
2
Nein. Aber ich werde es auf jeden Fall wieder versuchen, sobald ich eine Lösung gefunden habe.
Danoram
2
Anscheinend habe ich vergessen, den CSS-Link zu meiner index.htmlDatei hinzuzufügen . whoopsie .. Jetzt sieht alles gut aus. Prost auf die Hilfe!
Danoram
3
Ich verwende keine der Komponenten, die benötigt werden hammer. Gibt es eine Möglichkeit, diese Warnungen zu deaktivieren? Ich bekomme ungefähr 30 davon in meinen Tests.
CWSpear
1
'Hammerjs / Hammer' importieren; Warnung für mich entfernt
Silentsudo
102

Installieren Sie Hammerjs

  • mit npm

    npm install --save hammerjs
  • (oder) mit Garn

    yarn add hammerjs

Importieren Sie dann hammerjsauf den Einstiegspunkt Ihrer App (z. B. src / main.ts).

import 'hammerjs';



Alles ist gut
quelle
1
ah gute Antwort, es war mir egal zu denken, dass dies wahrscheinlich das ist, was viele Leute, die diese Frage finden, wissen wollen
Danoram
7
Dies sollte die richtige Antwort sein. Darüber hinaus sollten Sie import 'hammerjs';jeder *.spect.tsTestdatei, die Materialkomponenten verwendet , hinzufügen , um die Warnung beim Ausführen zu beheben ng test.
Cartucho
3
Ich musste das nicht ändern, tsconfig.jsonaber der Import funktioniert, danke für die Antwort.
Falsche
Wenn Sie den Import zu jeder Spezifikationsdatei hinzufügen müssen, gibt es dann keine Möglichkeit, ihn zur Datei karma.conf hinzuzufügen?
Jeff
Die zitierte Quelle sagt import it on your app's entry point (e.g. src/main.ts)eher zu als in app.module.ts. Natürlich spielt es sowieso keine Rolle.
Stack Underflow
9

In Ihrer systemjs.config.jsDatei müssen Sie außerdem den folgenden Eintrag hinzufügen:

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

zusammen mit natürlich:

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

Das andere, was in Ihrem Code fehlt (zumindest basierend auf dem, was Sie im GH-Repo haben), ist die Aufnahme des Material Design CSS. Fügen Sie dies Ihrer index.htmlDatei hinzu:

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

Ich hoffe das hilft.

Tamas
quelle
Es tut mir leid, dass ich so lange brauche, um mich bei Ihnen zu melden. Ich glaube nicht, dass mein Projekt systemjs verwendet. obwohl du recht hast, dass ich vergessen habe, das CSS zu importieren! Vielen Dank, es sieht jetzt richtig aus!
Danoram
6

das hat bei mir funktioniert (und das ist auch bei ionic4) ich könnte hammer.js zum funktionieren bringen - und auch ionic bei material.angular.io (unten)

Hammer + ionisch (Hammer + auch eckig):

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

dann

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

dann

tsconfig.json - added types as seen below

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

dann

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

dann

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

Beispielcode von der Website von hammerjs funktioniert

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 + ionisches + Material: Damit Materialhammer mit ionischem Material funktioniert

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

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

und voila, dein materieller Schieberegler funktioniert.

Emilio Maciel
quelle
3

Öffnen Sie Ihre Befehlszeile oder Powershell, geben Sie das Verzeichnis Ihres Angular2-Projekts ein : cd your-project's-root, drücken Sie die Eingabetaste und fügen Sie ein:

npm install hammerjs --save

Npm fügt automatisch alle Abhängigkeiten zu Ihrer package.jsonDatei hinzu.

freundlicher Benutzer
quelle
Die Version von @torazaburo Hammerjs auf npm wird regelmäßig aktualisiert, sodass das OP sicher sein kann, dass die Installation von hammerjs mit dem Befehl npm auf dem neuesten Stand ist und funktioniert.
freundlicher Benutzer
@torazaburo Um ehrlich zu sein, habe ich es --savebei der Installation von npm nicht verwendet und alles verlief reibungslos, aber da Sie ein sehr erfahrener Benutzer sind, wäre es unklug, mit Ihnen zu streiten.
freundlicher Benutzer
Ich denke, --saveist nicht mehr notwendig, weil es automatisch verwendet wird. docs.npmjs.com/cli/install
Spurious
1
Wenn Sie das weglassen, --savefunktioniert es weiterhin, wird jedoch nicht zur Datei package.json hinzugefügt, was bedeutet, dass es npm installbei der zukünftigen Ausführung nicht automatisch installiert wird
Niklas
1

Installieren mit

npm install --save hammerjs

oder

yarn add hammerjs

Importieren Sie es nach der Installation in den Einstiegspunkt Ihrer App (z. B. src / main.ts).

import 'hammerjs';

Erste Schritte mit eckigem Material

Courtney Pattison
quelle
1
  1. npm install hammerjs --save
  2. npm install @ types / hammerjs --save-dev
  3. Fügen Sie dies unter compiler-Optionen zu typescript.config hinzu

    "types": ["hammerjs"]

  4. füge dies zu app.components.ts hinzu:

hammerjs

John Peters
quelle