it-swarm.com.de

Angular 2 - 'HammerJS konnte nicht gefunden werden'

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

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

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

Mein Projekt finden Sie unter Github Repo



Randnotiz

Wenn Sie hammerjs installiert haben und Ihre Komponenten immer noch nicht korrekt rendern, sollten Sie beachten, dass Sie angular material 2 Komponenten und verwenden keine HTML-Elemente mit materialize-css Klassen . Wenn Sie are mit materialize-css anstelle von angular material 2 , müssen Sie Fügen Sie es separat zu Ihrem Projekt hinzu.

79
Danoram

In deinem package.json Datei füge dies zu dependencies hinzu

"hammerjs": "^ 2.0.8",

Oder wenn Sie eine alternative automatische Methode wünschen, können Sie npm i hammerjs --save (oder npm i [email protected] --save wenn du willst, seit 2.0.8 ist jetzt die neueste Version) in Ihrem Root-Projektordner und testen Sie dann, ob das Problem weiterhin besteht, und versuchen Sie, das node_modules Ordner und installieren Sie ihn im Root Projekt Ordner auch indem Sie npm install, der das dependencies ( prüft, wo hammerjs liegt ), devDependencies ... , im package.json Datei und installieren Sie sie.

Auch in deinem polyfills.ts (empfohlen, eine zu haben, wenn Sie nicht haben)

import 'hammerjs/hammer';

So würde es gefunden werden, während Ihre angular App ausgeführt wird, seit polyfills.ts selbst wird durch Import aufgerufen (im Normalfall, sonst können Sie es überprüfen) in main.ts das ist der angular Apps Einstiegspunkt.

141
selem mn

Mit den neuesten Angular Versionen,

Installieren Sie hammerjs

  • mit npm

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

    yarn add hammerjs
    

Importieren Sie dann hammerjs am Einstiegspunkt Ihrer App (z. B. src/main.ts).

import 'hammerjs';




Ursprüngliche Antwort (Versionen unter Angular 5)

Installiere hammerjs über npm

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

In Ihrem src/app/app.module.ts import hammerjs,

import 'hammerjs';

Fügen Sie dann Hammerjs zu den Typen in Ihrem tsconfig.json Datei.

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

quelle: Erste Schritte mit Angular Material 2

89

In deinem systemjs.config.js Datei müssen Sie auch den folgenden Eintrag hinzufügen:

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

zusammen mit natürlich:

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

Die andere Sache, die 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 zu Ihrem index.html Datei:

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

Ich hoffe das hilft.

9
Tamas

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

Hammer + ionic (Hammer + angular)):

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 Hammerjs-Site 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 + ionisch + Material: Damit der Materialhammer mit ionisch 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 material slider funktioniert.

3
Emilio Maciel
  1. npm install hammerjs --save
  2. npm install @ types/hammerjs --save-dev
  3. fügen Sie dies TypeScript.config unter Compiler-Optionen hinzu

    "types": ["hammerjs"]

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

hammerjs

2
John Peters

Öffne deine Kommandozeile oder PowerShell, gib das Verzeichnis deines angle2-Projekts ein: cd your-project's-root, Drücke Enter und füge ein:

npm install hammerjs --save

Npm fügt automatisch alle Abhängigkeiten in Ihre package.json - Datei ein.

2
kind user

Installieren Sie mit

npm install --save hammerjs

oder

yarn add hammerjs

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

import 'hammerjs';

Handbuch für die ersten Schritte mit kantigem Material

1