Angular 2 - "Impossible de trouver HammerJS"

Question

Je suis en train de travailler sur un simple angular2 projet pour lequel je suis en train d'importer du Matériel de la Conception de mon projet mais certains composants ne fonctionnent pas correctement, et une console d'avertissement dit:

Ne pouvait pas trouver HammerJS. Certains Angulaire des composantes peut ne pas fonctionner correctement.

J'ai hammerjs installé et aussi @angular/material. Comment puis-je résoudre ce problème?

Mon projet peut être trouvé à ce dépôt github

Sidenote

Il peut être intéressant de noter que si vous avez hammerjs installé et vos composants sont toujours pas rendu correctement pour vous assurer que vous utilisez angular material 2 composants et non pas des éléments html avec materialize-css les classes. Si vous êtes à l'aide de materialize-css au lieu de angular material 2, vous aurez besoin de l'ajouter à votre projet séparément.

Answer 1

Dans votre package.json le fichier ajoutez à cela dependencies

"hammerjs": "^2.0.8",

Ou si vous voulez une alternative automatique de sorte que vous pouvez tapez npm i hammerjs --save (ou npm i hammerjs@2.0.8 --save si vous le souhaitez, depuis 2.0.8 est la version la plus récente de nos jours) dans votre dossier racine du projet et de tester ensuite, si le problème persiste essayez de supprimer l' node_modules le dossier et de le réinstaller dans le dossier racine du projet également en exécutant npm install qui va vérifier l' dependencies (où hammerjs réside), devDependencies ..., en package.json le fichier et installez-les.

Aussi dans votre polyfills.ts (recommandée pour avoir une si vous ne l'avez pas)

importer 'hammerjs/marteau";

Ainsi, il serait trouvé lors de votre angulaire de l'application est exécutée depuis polyfills.ts lui-même est appelé par l'importation (dans le cas normal, sinon vous pouvez le vérifier) en main.ts qui est l'angle d'applications " point d'entrée.

Answer 2

Avec la dernière Angulaire versions,

Installer hammerjs

• avec npm

  npm install --save hammerjs
  

• (ou) avec fil

  yarn add hammerjs
  

Puis importer hammerjs sur votre application point d'entrée (ex: src/main.ts).

import 'hammerjs';

---

Réponse originale à cette question (les versions ci-dessous Angulaire 5)

Installez hammerjs via npm

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

Dans votre src/app/app.module.ts d'importation hammerjs,

import 'hammerjs';

Puis ajouter hammerjs pour les types dans votre tsconfig.json le fichier.

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

source: commencer Angulaire des Matériaux 2

Answer 3

Dans votre fichier systemjs.config.js , vous devez également ajouter l'entrée suivante:

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

avec bien sûr:

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

L'autre chose qui manque à votre code (du moins sur la base de ce que vous avez dans le référentiel GH) est l'inclusion du CSS Material Design, ajoutez-la à votre fichier index.html :

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

J'espère que ça aide.

Answer 4

cela a fonctionné pour moi (et c'est avec ionic4) J'ai pu faire hammer.js travail - et aussi ionique avec le matériel.angulaire.io (dans le fond)

Marteau + ionique (marteau + angulaire):

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

alors

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

alors

tsconfig.json - added types as seen below

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

alors

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

alors

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

Exemple de code à partir hammerjs site fonctionne

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

Marteau+ionique+matériel: rendre le matériel marteau travailler avec ionique

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

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

et voila, votre curseur fonctionne.

Answer 5

Ouvrez votre ligne de commande ou PowerShell, tapez le répertoire de votre projet angular2: cd your-project's-root , appuyez sur Entrée et collez:

 npm install hammerjs --save
 

Npm ajoutera automatiquement toutes les dépendances dans votre fichier package.json .