Angular: 'No se pudo encontrar HammerJS'


94

Estoy trabajando en un proyecto angular simple en el que estoy tratando de importar Material Design a mi proyecto, pero algunos de los componentes no funcionan correctamente y una advertencia de la consola dice:

No se pudo encontrar HammerJS. Es posible que algunos componentes de Angular Material no funcionen correctamente.

He hammerjsinstalado y también @angular/material. ¿Cómo resuelvo este problema?



Nota al margen

Puede valer la pena señalar que si ha hammerjsinstalado y sus componentes aún no se renderizan correctamente, asegúrese de que está utilizando angular material componentes y no elementos html con materialize-css clases . Si está utilizando en materialize-csslugar de angular material, deberá agregarlo a su proyecto por separado.

Respuestas:


162

En su package.jsonarchivo agregue esto adependencies

"hammerjs": "^ 2.0.8",

O si desea una forma automática alternativa, simplemente puede escribir npm i hammerjs --save(o npm i hammerjs@2.0.8 --savesi lo desea, ya que 2.0.8es la última versión en la actualidad) en la carpeta raíz del proyecto y luego probar, si el problema persiste, intente eliminar la node_modulescarpeta y reinstalarla en la raíz también ejecutando la carpeta del proyecto,npm install que verificará dependencies( dónde hammerjsreside ), devDependencies..., en el package.jsonarchivo y los instalará.

También en tu polyfills.ts(recomendado tener uno si no lo tienes)

importar 'hammerjs / hammer';

Por lo tanto, se encontrará mientras se ejecuta su aplicación angular, ya que polyfills.tsse llama a sí misma por importación (en un caso normal, de lo contrario, puede verificarlo) en el main.tsque se encuentra el punto de entrada de las aplicaciones angulares.


9
agregar la declaración de importación para polyfills.tssilenciar la advertencia, ¡lo cual es genial! Pero los componentes de diseño de materiales aún no se representan correctamente: / Incluiré una captura de pantalla en la descripción de la pregunta. ¡Gracias por su ayuda hasta ahora!
Danoram

2
No. pero me aseguraré de volver una vez que encuentre una solución.
Danoram

2
Parece que olvidé agregar el enlace css a mi index.htmlarchivo. whoopsie .. Todo se ve bien ahora. ¡Salud por la ayuda!
Danoram

3
No estoy usando ninguno de los componentes necesarios hammer. ¿Hay alguna forma de desactivar estas advertencias? Obtengo como 30 de estos en mis pruebas.
CWSpear

1
importar 'hammerjs / hammer'; advertencia eliminada para mí
silentsudo

102

Instalar hammerjs

  • con npm

    npm install --save hammerjs
  • (o) con hilo

    yarn add hammerjs

Luego, importe hammerjsen el punto de entrada de su aplicación (por ejemplo, src / main.ts).

import 'hammerjs';




1
Ah, buena respuesta, no me importaba pensar que esto es probablemente lo que muchas personas que encuentran esta pregunta querrían saber
Danoram

7
Esta debería ser la respuesta correcta. Además, debe agregar import 'hammerjs';todos *.spect.tslos archivos de prueba que utilizan componentes de material para corregir la advertencia cuando se ejecuta ng test.
Cartucho

3
No necesité cambiar el tsconfig.jsonpero la importación funciona, gracias por la respuesta.
Espurio

si tiene que agregar la importación a cada archivo de especificaciones, ¿no debería haber una manera de agregarlo al archivo karma.conf?
Jeff

La fuente citada dice en import it on your app's entry point (e.g. src/main.ts)lugar de en app.module.ts. Obviamente, en realidad no importa de todos modos.
Stack Underflow

9

En su systemjs.config.jsarchivo, también debe agregar la siguiente entrada:

'hammerjs': 'npm:hammerjs/hammer.js',

junto con, por supuesto:

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

La otra cosa que falta en su código (al menos en base a lo que tiene en el repositorio de GH) es la inclusión del CSS de Material Design, agregue esto a su index.htmlarchivo:

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

Espero que esto ayude.


Lamento tardar tanto en responderte. No creo que mi proyecto esté usando systemjs. ¡aunque tienes razón sobre que me olvidé de importar el css! ¡Muchas gracias ahora se ve bien!
Danoram

6

esto funcionó para mí (y esto también es con ionic4) Podría hacer que hammer.js funcione, y también iónico con material.angular.io (en la parte inferior)

Martillo + iónico (martillo + angular también):

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

luego

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

luego

tsconfig.json - added types as seen below

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

luego

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

luego

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

Código de muestra del sitio de hammerjs funciona

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.");
});

Martillo + iónico + material: para hacer que el martillo de material funcione con iónico

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

y listo, tu control deslizante de material funciona.


3

Abre tu línea de comando o powershell, escribe el directorio de tu proyecto angular2:, cd your-project's-rootpresiona enter y pega:

npm install hammerjs --save

Npm agregará automáticamente todas las dependencias a su package.jsonarchivo.


@torazaburo La versión de Hammerjs en npm se actualiza con frecuencia, por lo que el OP puede estar seguro de que si instala hammerjs usando el comando npm, estará actualizado y funcionando.
amable usuario

@torazaburo Para ser honesto, no --savelo usé mientras lo instalaba por npm y todo salió bien, pero como eres un usuario muy experimentado, sería imprudente discutir contigo.
amable usuario

Creo que --saveya no es necesario porque se usará automáticamente. docs.npmjs.com/cli/install
espurias

1
Si omite --save, seguirá funcionando, pero no se agregará al archivo package.json, lo que significa que no se instalará automáticamente cuando se ejecute npm installen el futuro
Niklas

2
  1. npm install hammerjs --save
  2. npm install @ types / hammerjs --save-dev
  3. agregue esto a typescript.config en las opciones del compilador

    "tipos": ["hammerjs"]

  4. agregue esto a app.components.ts:

hammerjs


USTED, señor, es un salvador y si alguna vez logro tener un segundo hijo, ¡le pondrán su nombre!
codingbuddha

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.