Angular - 'Impossible de trouver HammerJS'

94

Je travaille sur un projet angulaire simple dans lequel j'essaye d'importer Material Design dans mon projet mais certains des composants ne fonctionnent pas correctement et un avertissement de console dit:

Impossible de trouver HammerJS. Certains composants de matériau angulaire peuvent ne pas fonctionner correctement.

J'ai hammerjsinstallé et aussi @angular/material. Comment résoudre ce problème?



Sidenote

Il peut être intéressant de noter que si vous avez hammerjsinstallé et que vos composants ne sont toujours pas rendus correctement, assurez-vous que vous utilisez des angular material composants et non des éléments html avec des materialize-css classes . Si vous êtes utilisez au materialize-csslieu de angular material, vous devez l' ajouter à votre projet séparément.

Danoram
la source

Réponses:

162

Dans votre package.jsonfichier, ajoutez ceci àdependencies

"hammerjs": "^ 2.0.8",

Ou si vous voulez un autre moyen automatique, vous pouvez simplement taper npm i hammerjs --save(ou npm i [email protected] --savesi vous le souhaitez, car 2.0.8c'est la dernière version de nos jours) dans votre dossier de projet racine et tester, si le problème persiste, essayez de supprimer le node_modulesdossier et de le réinstaller à la racine. dossier de projet également en exécutant npm installqui vérifiera le dependencies( hammerjsréside ), devDependencies..., dans le package.jsonfichier et les installera.

Aussi dans votre polyfills.ts(recommandé d'en avoir un si vous ne l'avez pas)

importer 'hammerjs / hammer';

Ainsi, il se trouverait lors de l'exécution de votre application angulaire puisqu'elle polyfills.tsest appelée par importation (dans un cas normal, sinon vous pouvez la vérifier) dans main.tslaquelle se trouve le point d'entrée des applications angulaires.

selem mn
la source
9
l'ajout de l'instruction d'importation pour faire polyfills.tstaire l'avertissement, ce qui est génial! Mais les composants de conception matérielle ne sont toujours pas rendus correctement: / Je vais inclure une capture d'écran dans la description de la question. Merci pour votre aide jusqu'à maintenant!
Danoram
2
non. mais je ne manquerai pas de revenir une fois que je trouverai une solution.
Danoram
2
Il semble que j'ai oublié d'ajouter le lien css à mon index.htmlfichier. whoopsie .. Tout va bien maintenant. Vive l'aide!
Danoram
3
Je n'utilise aucun des composants dont j'ai besoin hammer. Existe-t-il un moyen de désactiver ces avertissements? J'en reçois 30 dans mes tests.
CWSpear
1
importer 'hammerjs / hammer'; Suppression de l'avertissement pour moi
silentsudo
102

Installez hammerjs

  • avec npm

    npm install --save hammerjs
  • (ou) avec du fil

    yarn add hammerjs

Ensuite, importez hammerjssur le point d'entrée de votre application (par exemple src / main.ts).

import 'hammerjs';



Tout est Vаиітy
la source
1
ah bonne réponse, je m'en fichais de penser que c'est probablement ce que beaucoup de gens qui trouvent cette question pourraient vouloir savoir
Danoram
7
Cela devrait être la bonne réponse. En outre, vous devez ajouter import 'hammerjs';chaque *.spect.tsfichier de test qui utilise des composants matériels afin de corriger l'avertissement lors de l'exécution ng test.
Cartucho
3
Je n'ai pas eu besoin de changer le tsconfig.jsonmais l'importation fonctionne, merci pour la réponse.
Spurious
si vous devez ajouter l'importation à chaque fichier de spécification, ne devrait-il pas y avoir un moyen de l'ajouter au fichier karma.conf?
Jeff
La source citée dit import it on your app's entry point (e.g. src/main.ts)plutôt que dans app.module.ts. De toute façon, cela n'a pas vraiment d'importance.
Stack Underflow
9

Dans votre systemjs.config.jsfichier, 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 dans votre code (du moins en fonction de ce que vous avez dans le repo GH) est l'inclusion du CSS Material Design, ajoutez ceci à votre index.htmlfichier:

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

J'espère que ça aide.

Tamas
la source
Désolé d'avoir mis si longtemps à vous répondre. Je ne pense pas que mon projet utilise systemjs. bien que vous ayez raison d'oublier d'importer le css! merci beaucoup ça a l'air bien maintenant!
Danoram
6

cela a fonctionné pour moi (et c'est aussi avec ionic4) je pourrais faire fonctionner hammer.js - et aussi ionique avec material.angular.io (en bas)

Marteau + ionique (marteau + angulaire également):

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

puis

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

puis

tsconfig.json - added types as seen below

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

puis

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

puis

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

Exemple de code des travaux du site hammerjs

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 + matériau ionique +: pour faire fonctionner le marteau matériel 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 voilà, votre curseur de matériau fonctionne.

Emilio Maciel
la source
3

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

npm install hammerjs --save

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

gentil utilisateur
la source
La version de @torazaburo Hammerjs sur npm est fréquemment mise à jour afin que l'OP puisse être sûr que s'il installe hammerjs en utilisant la commande npm, il sera à jour et fonctionnera.
kind user
@torazaburo Pour être honnête, je ne l'ai pas utilisé --savelors de son installation par npm et tout s'est bien passé, mais comme vous êtes un utilisateur très expérimenté, il serait imprudent de discuter avec vous.
kind user
Je pense que ce --saven'est plus nécessaire car il sera utilisé automatiquement. docs.npmjs.com/cli/install
Spurious
1
Si vous omettez le, --savecela fonctionnera toujours, mais il ne sera pas ajouté au fichier package.json, ce qui signifie qu'il ne sera pas automatiquement installé lors de l'exécution npm installà l'avenir
Niklas
2
  1. npm installer hammerjs - enregistrer
  2. npm install @ types / hammerjs --save-dev
  3. ajoutez ceci à typescript.config sous les options du compilateur

    "types": ["hammerjs"]

  4. ajoutez ceci à app.components.ts:

hammerjs

John Peters
la source
VOUS monsieur, êtes un sauveur et si jamais j'arrive à avoir un deuxième fils, il portera votre nom!
codingbuddha
1

Installer avec

npm install --save hammerjs

ou

yarn add hammerjs

Après l'installation, importez-le sur le point d'entrée de votre application (par exemple src / main.ts).

import 'hammerjs';

Guide de démarrage du matériau angulaire

Courtney Pattison
la source