Angular - "Could not find HammerJS"

Sto lavorando a un semplice progetto angolare in cui sto cercando di importare Material Design nel mio progetto ma alcuni componenti non funzionano correttamente e un avviso della console dice:

Impossibile trovare HammerJS. Alcuni componenti di materiale angolare potrebbero non funzionare correttamente.

Ho hammerjsinstallato e anche @angular/material. Come risolvo questo problema?

Nota a margine

Potrebbe valere la pena notare che se hai hammerjsinstallato e i tuoi componenti non vengono ancora visualizzati correttamente, assicurati di utilizzare angular material componenti e non elementi html con materialize-css classi . Se si utilizza materialize-cssinvece angular material, è necessario aggiungerlo al progetto a parte.

Nel tuo package.jsonfile aggiungi questo adependencies

"hammerjs": "^ 2.0.8",

O se vuoi un modo automatico alternativo puoi semplicemente digitare npm i hammerjs --save(o npm i hammerjs@2.0.8 --savese vuoi, dato che 2.0.8è l'ultima versione oggigiorno) nella cartella del tuo progetto principale e testare quindi, se il problema persiste prova a eliminare la node_modulescartella e reinstallarla nella radice cartella del progetto anche eseguendo npm installche controllerà dependencies( dove hammerjsrisiede ), devDependencies..., nel package.jsonfile e li installerà.

Anche nel tuo polyfills.ts(consigliato di averne uno se non lo hai)

importare "hammerjs / hammer";

Pertanto, verrebbe trovato mentre la tua app angolare viene eseguita poiché polyfills.tsessa stessa viene chiamata per importazione (in un caso normale, altrimenti puoi controllarla) in main.tscui è il punto di ingresso delle app angolari.

Installa hammerjs

• con npm

  npm install --save hammerjs

• (o) con filo

  yarn add hammerjs

Quindi importa hammerjsnel punto di ingresso della tua app (ad esempio src / main.ts).

import 'hammerjs';

Nel tuo systemjs.config.jsfile devi anche aggiungere la seguente voce:

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

insieme a:

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

L'altra cosa che manca al tuo codice (almeno in base a quello che hai nel repo GH) è l'inclusione del CSS di Material Design, aggiungilo al tuo index.htmlfile:

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

Spero che aiuti.

questo ha funzionato per me (e questo è anche con ionic4) potrei far funzionare hammer.js - e anche ionico con material.angular.io (in basso)

Martello + ionico (anche martello + angolare):

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

poi

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

poi

tsconfig.json - added types as seen below

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

poi

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

poi

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

Il codice di esempio dal sito Hammerjs funziona

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

Martello + ionico + materiale: per far funzionare il martello materiale con ionico

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

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

e voilà, il tuo dispositivo di scorrimento del materiale funziona.

Apri la riga di comando o PowerShell, digita la directory del tuo progetto angular2:, premi invio cd your-project's-roote incolla:

npm install hammerjs --save

Npm aggiungerà automaticamente tutte le dipendenze nel tuo package.jsonfile.

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

3. aggiungilo a typescript.config nelle opzioni del compilatore

   "types": ["hammerjs"]

4. aggiungilo a app.components.ts:

Installa con

npm install --save hammerjs

o

yarn add hammerjs

Dopo l'installazione, importala nel punto di ingresso della tua app (ad esempio src / main.ts).

import 'hammerjs';

Guida introduttiva al materiale angolare