Angular - 'Impossible de trouver HammerJS'

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.

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

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

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.

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.

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.

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:

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