web-dev-qa-db-fra.com

Impossible de trouver HammerJS dans angular 6

J'utilise des matériaux angulaires dans mon projet. Je reçois ces avertissements:

Impossible de trouver HammerJS. Certains Angular Composants de matériaux peuvent ne pas fonctionner correctement.

L'événement "longpress" ne peut pas être lié car Hammer.JS n'est pas chargé et aucun chargeur personnalisé n'a été spécifié.

Je sais que ceci est un duplicata de ceci question

Dans la réponse, ils ont mentionné que:

  1. Nous devons ajouter "^2.0.8", à dependencies dans le fichier package.json .
  2. importer 'hammerjs/hammer'; dans le fichier polyfills.ts .

Dans mon cas, tout va bien, je reçois toujours le même avertissement dans la console du navigateur.

angularangular-materialhammer.js
37
PGH

Il y a 2 façons de résoudre ce problème:

  1. Incluez l’importation (main) dans le fichier de votre module principal ou polyfills.ts:

    import 'hammerjs';

  2. Vous pouvez également inclure le script d’un CDN dans votre fichier index.html:

    <head>
  <!-- ... -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <!-- ... -->
</head>
59
Edric

avec angular6, vous pouvez inclure le chemin hammerjs dans node_modules dans le fichier angular.json.

Angular doc indique que le fichier angular.json a pour but

Les valeurs de configuration CLI par défaut pour tous les projets de l'espace de travail, y compris les options de configuration pour les outils de construction, de service et de test utilisés par la CLI, tels que TSLint, Karma et Protractor. Pour plus d'informations, voir Angular Configuration de l'espace de travail.

Vous pouvez inclure le chemin du module de noeud hammerjs dans la liste de scripts. voir ci-dessous pour un exemple:

 "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
            ]
          },
          "configurations": {
          ....

Notez que vous devez redémarrer ng serve pour que cela prenne effet.

11
Jun711

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

7
NicuVlad