javascript - Angular 2-''No se pudo encontrar HammerJS''

material-design hammer.js

Question

Estoy trabajando en un proyecto angular2 simple donde estoy tratando de importar Material Design en mi proyecto pero algunos de los componentes no funcionan correctamente y una advertencia de la consola dice:

No se pudo encontrar HammerJS. Ciertos componentes de material angular pueden no funcionar correctamente.

Tengo hammerjs instalados y también @angular/material . ¿Cómo resuelvo este problema?

Mi proyecto se puede encontrar en este repositorio de Github

Nota al margen

Vale la pena señalar que si tiene hammerjs instalados y sus componentes aún no se hammerjs correctamente para asegurarse de que está utilizando componentes de angular material 2 y no elementos html con clases materialize-css . Si está utilizando materialize-css lugar de angular material 2 , deberá agregarlo a su proyecto por separado.

Answer 1

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:

Answer 2

Abra su línea de comandos o PowerShell, escriba el directorio de su proyecto angular2: cd your-project''s-root de su proyecto cd your-project''s-root enter y pegue:

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

Npm agregará automáticamente todas las dependencias en su archivo package.json .

Answer 3

En su archivo package.json agregue esto a las dependencies

"hammerjs": "^ 2.0.8",

O si desea una forma automática alternativa, simplemente puede escribir npm i hammerjs --save (o npm i [email protected] --save si lo desea, ya que 2.0.8 es la última versión hoy en día) en la carpeta del proyecto raíz y pruebe entonces, si el problema persiste, intente eliminar la carpeta node_modules y reinstalarla en la carpeta raíz del proyecto también ejecutando npm install que verificará las dependencies ( donde reside hammerjs ), devDependencies ..., en el archivo package.json e instálelo ellos.

También en sus polyfills.ts (se recomienda tener uno si no lo ha hecho)

importar ''hammerjs / hammer'';

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

Answer 4

En su archivo systemjs.config.js también necesita 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 función de lo que tiene en el repositorio de GH) es la inclusión del CSS de Material Design, agregue esto a su archivo index.html :

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

Espero que esto ayude.

Answer 5

Instalar con

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

o

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

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

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

npm install hammerjs --save

Guía de inicio de material angular

Answer 6

Instalar hammerjs

• con npm

  npm install --save hammerjs

• (o) con hilo

  yarn add hammerjs

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

import ''hammerjs'';

Answer 7

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-dev @types/hammerjs

entonces

import ''hammerjs'';

entonces

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

entonces

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

entonces

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

Código de muestra del sitio hammerjs funciona

tsconfig.json - added types as seen below

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

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

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

y listo, tu deslizador de material funciona.