Angular - 'HammerJS konnte nicht gefunden werden'

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.

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 hammerjs@2.0.8 --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.

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';

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.

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.

Ö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.

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

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: