web-dev-qa-db-fra.com

Angular 2 - 'Impossible de trouver HammerJS'

Je travaille sur un projet angular2 simple dans lequel j'essaie d'importer Material Design dans mon projet, mais certains composants ne fonctionnent pas correctement et un avertissement concernant la console indique:

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

J'ai hammerjs installé et aussi _@angular/material_. Comment résoudre ce problème?

Mon projet peut être trouvé à ceci github repo



Sidenote

Il peut être intéressant de noter que si vous avez hammerjs installé et que vos composants ne sont toujours pas restitués correctement, assurez-vous d'utiliser _angular material 2_ composants et non des éléments HTML avec _materialize-css_ classes. Si vous utilisez avec materialize-css au lieu de angular material 2 , vous aurez besoin de pour l'ajouter à votre projet séparément.

javascriptangularmaterial-designhammer.js
79
Danoram

Dans votre fichier package.json ajoutez-le à dependencies

"hammerjs": "^ 2.0.8",

Ou si vous voulez une méthode automatique alternative, vous pouvez simplement taper npm i hammerjs --save (ou npm i [email protected] --save si vous voulez, puisque 2.0.8 est la dernière version de nos jours) dans votre dossier de projet racine et testez ensuite, si le problème persiste, essayez de supprimer le dossier node_modules et de le réinstaller dans le dossier dossier racine du projet également en exécutant npm install, qui vérifie le fichier dependencies ( où hammerjs réside ), devDependencies ..., dans le fichier package.json et les installe. .

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

importer 'hammerjs/hammer';

Ainsi, il serait trouvé pendant que votre application angular serait exécutée puisque polyfills.ts lui-même serait appelé par importation (dans le cas normal, vous pouvez le vérifier). dans main.ts qui est le point d'entrée de angular applications.

141
selem mn

Avec les dernières Angular versions,

Installer hammerjs

  • avec npm 

    _npm install --save hammerjs
_

  • (ou) avec fil 

    _yarn add hammerjs
_

Importez ensuite hammerjs sur le point d’entrée de votre application (par exemple, src/main.ts).

_import 'hammerjs';
_



Réponse originale (versions inférieures à Angular 5)

Installez hammerjs via npm

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

Dans votre src/app/app.module.ts import hammerjs,

_import 'hammerjs';
_

Ajoutez ensuite hammerjs aux types de votre fichier tsconfig.json.

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

source: commencez avec Angular Material 2

89
All Іѕ Vаиітy

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-le à 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.

9
Tamas

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

Marteau + ionic (aussi marteau + angular):

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

ensuite

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

ensuite

tsconfig.json - added types as seen below

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

ensuite

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

ensuite

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

Exemple de code provenant 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 que le marteau fonctionne avec un matériau 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 le tour est joué, votre curseur de matière fonctionne.

3
Emilio Maciel
  1. npm installer hammerjs --save
  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

2
John Peters

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.

2
kind user

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ériel angulaire

1
Courtney Pattison