Angulaires - 'impossible de trouver HammerJS'

Je suis en train de travailler sur un simple angulaire du projet où 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?

Note

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 composants et non pas des éléments html avec materialize-css classes.
Si vous sont à l'aide de se matérialisent-css au lieu de angulaire du matériel, vous aurez besoin de l'ajouter à votre projet séparément.

InformationsquelleAutor Danoram | 2016-12-25
  1. 147

    Dans votre package.json fichier ajouter à dependencies

    "hammerjs": "^2.0.8",

    Ou si vous voulez une alternative automatique de sorte que vous pouvez type npm i hammerjs --save (ou npm i [email protected] --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 le node_modules dossier et de le réinstaller dans le dossier racine du projet aussi en exécutant npm install qui va vérifier la dependencies (où hammerjs réside), devDependencies ..., dans package.json fichier et installez-les.

    Également dans votre polyfills.ts (il est recommandé d'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 un cas normal, sinon vous pouvez le vérifier) dans main.ts qui est l'angle d'applications " point d'entrée.

    • l'ajout de l'instruction import pour polyfills.ts les silences de l'avertissement, ce qui est excellent! Mais la conception de matériel composants sont toujours pas rendu correctement :/ je vais inclure une capture d'écran dans la question de la description. Merci pour votre aide si loin!
    • sur Material, entendez-vous, qui passez sur le i ? car je ne vois pas une différence flagrante
    • J'ai ajouté que et réinstallé le node_modules mais pas de changement :/
    • c'est ok. Merci pour votre aide jusqu'à présent!
    • pas de. mais je vais être sûr de vérifier en arrière une fois que je trouve une solution.
    • Semble que j'ai oublié d'ajouter le lien css de mon index.html fichier. whoopsie.. Tout se passe bien maintenant. Bravo pour l'aider!
    • vous êtes donc la bienvenue, heureux de savoir ^_^
    • Je ne suis pas en utilisant l'un des composants qui ont besoin de hammer. Est-il un moyen de désactiver ces mises en garde? Je reçois comme 30 de ces, dans mes tests.
    • ce genre de mises en garde ?
    • Merci. Cela a fonctionné sur angulaire 5 trop
    • Pourquoi ne pas la bibliothèque dépendent directement 'hammerjs" depuis sa va l'utiliser quand même?
    • pas tous les composants matériels en dépend, en fait, donc c'est pourquoi, il serait inutile pour quelqu'un qui utilise seulement des composants qui ne nécessitent hammerjs.
    • importer 'hammerjs/marteau"; suppression de l'avertissement pour moi
    • C'est une mauvaise réponse. Ne fonctionne que pour le silence de l'avertissement, s'il vous plaît éviter
    • il a travaillé pour de 147 personnes (min), merci pour le downvote 🙂
    • bien sûr, il fonctionne, mais ce n'est pas un polyfill alors pourquoi le mettre là? Il y a une différence de travail et de la bonne solution? Pouvez-vous expliquer pourquoi vous devriez le mettre dans polyfills?
    • Donc hammerjs est un polyfill pas une bibliothèque pour fournir des gestes selon vous? Dans l'ensemble de la documentation etc nulle part jusqu'à présent, ou même sur hammerjs pensions de ses mentionné pour être polyfill. Ajoutant que l'importation n'implique que plus tard , quand un navigateur implementes cela, vous pouvez supprimer hammerjs à partir de là (ou si vous n'êtes pas le ciblage de ce navigateur) , ce qui n'arrivera pas. Les navigateurs ne les fournissez le même hammerjs api et c'est pourquoi son besoin. Vous pouvez ajouter à polyfill js même votre application init, mais qui ne devrait pas être le cas.
    • Même la recherche de hammerjs + polyfill ne mène ici 😀
    • De toute façon ce n'est pas une réponse valable angulaire. Selon les spécifications et le matériel de l'équipe, il devrait être dans le main.ts comme polyfill.js peut-être disparu dans les prochaines versions. Et hammerjs n'est pas un polyfill. Son ok pas d'accord

    InformationsquelleAutor selem mn
  2. 94

    Installer hammerjs

    • avec mnp

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

    • ah la bonne réponse, je n'ai pas de soins à penser que c'est probablement ce que beaucoup de gens qui trouvent cette question, à savoir
    • Cela devrait être la bonne réponse. En outre, vous devez ajouter import 'hammerjs'; dans tous les *.spect.ts fichier de test qui utilise des matériaux des composants afin de fixer l'avertissement lors de l'exécution de ng test.
    • Je n'ai pas besoin de changer la tsconfig.json mais l'import fonctionne, merci pour la réponse.
    • correcte o mundo.. doit être la bonne réponse
    • si vous devez ajouter à l'importation pour chaque fichier spec, ne devrait-il pas être un moyen pour l'ajouter à la karma.fichier conf?
    • cela a fonctionné pour moi. Je suis à l'aide Angulaire 7
    • Le source citée dit import it on your app's entry point (e.g. src/main.ts) plutôt que de dans l'app.le module.ts. De toute évidence, il n'a pas vraiment d'importance de toute façon si.

    InformationsquelleAutor All Іѕ Vаиітy
  3. 9

    Dans votre systemjs.config.js fichier 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 (au moins d'après ce que vous avez dans le GH repo) est l'inclusion de la Conception de Matériel CSS, ajoutez ceci à votre index.html fichier:

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

    J'espère que cette aide.

    • Désolé de prendre tant de temps pour revenir à vous. Je ne pense pas que mon projet est à l'aide de systemjs. bien que vous avez raison à propos de m'oublier pour importer le css! merci beaucoup c'est maintenant à la recherche de la droite!
    InformationsquelleAutor Tamas
  4. 3

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

    Marteau + ionique (marteau + angulaire en tant que bien):

    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 à 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 le tour est joué, votre curseur fonctionne.

    InformationsquelleAutor Emilio Maciel
  5. 2

    Ouvrir votre ligne de commande ou powershell, tapez le répertoire de votre angular2 projet: cd your-project's-root, appuyez sur entrée et coller:

    npm install hammerjs --save

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

    • Hammerjs version sur npm est fréquemment mis à jour afin que l'OP pouvez être sûr que si il installer hammerjs en utilisant la commande npm il sera à jour&de travail.
    • Pour être honnête, je n'ai pas utilisé --save lors de l'installation par mnp et tout s'est passé en douceur, mais puisque vous êtes très expérimenté, il serait imprudent de discuter avec vous.
    • Je pense que --save n'est plus nécessaire car il sera utilisé automatiquement. docs.npmjs.com/cli/install
    • Si vous omettez le --save il faudra encore travailler, mais il ne sera pas ajouté au package.fichier json, ce qui signifie qu'il ne sera pas installé automatiquement lors de l'exécution de npm install dans l'avenir
    InformationsquelleAutor kind user
  6. 1
    1. npm install hammerjs --enregistrer
    2. npm install @types/hammerjs --save-dev

    3. ajouter à la machine.la config dans les options du compilateur

      "types": [
      "hammerjs"
      ]

    4. ajouter cette app.des composants.ts:

    Angulaires - 'impossible de trouver HammerJS'

    InformationsquelleAutor John Peters
  7. 0

    Installer avec

    npm install --save hammerjs

    ou

    yarn add hammerjs

    Après l'installation, l'importer sur votre application point d'entrée (ex: src/main.ts).

    import 'hammerjs';

    Angulaire Du Matériel Guide De Mise En Route

    InformationsquelleAutor Courtney Pattison