Angular: 'No se pudo encontrar HammerJS'

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.

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 [email protected] --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.

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

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.

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.

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.

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:

Instalar con

npm install --save hammerjs

o

yarn add hammerjs

Después de la instalación, impórtelo en el punto de entrada de su aplicación (por ejemplo, src / main.ts).

import 'hammerjs';

Guía de inicio de material angular