Angular - 'Não foi possível encontrar o HammerJS'

Estou trabalhando em um projeto angular simples em que estou tentando importar Material Design para o meu projeto, mas alguns dos componentes não estão funcionando corretamente e um aviso do console diz:

Não foi possível encontrar o HammerJS. Certos componentes de material angular podem não funcionar corretamente.

Eu hammerjsinstalei e também @angular/material. Como faço para resolver esse problema?

Nota

Pode ser interessante notar que, se você hammerjsinstalou e seus componentes ainda não estão renderizando corretamente, certifique-se de que está usando angular material componentes e não elementos html com materialize-css classes . Se você estiver usando em materialize-cssvez de angular material, precisará adicioná-lo ao seu projeto separadamente.

Em seu package.jsonarquivo, adicione isso adependencies

"hammerjs": "^ 2.0.8",

Ou se você quiser uma forma alternativa automática, basta digitar npm i hammerjs --save(ou npm i [email protected] --savese quiser, já que 2.0.8é a última versão hoje em dia) na pasta raiz do projeto e testar então, se o problema ainda está ocorrendo, tente excluir a node_modulespasta e reinstalá-la na raiz pasta do projeto também executando o npm installqual irá verificar o dependencies( onde hammerjsreside ), devDependencies..., no package.jsonarquivo e instalá-los.

Também no seu polyfills.ts(recomendado ter um, se você não tiver)

importar 'hammerjs / hammer';

Portanto, ele seria encontrado enquanto seu aplicativo angular é executado, já que polyfills.tsele mesmo é chamado por importação (em um caso normal, caso contrário, você pode verificar), no main.tsqual é o ponto de entrada do aplicativo angular.

Instale o hammerjs

• com npm

  npm install --save hammerjs

• (ou) com fio

  yarn add hammerjs

Em seguida, importe hammerjsno ponto de entrada do seu aplicativo (por exemplo, src / main.ts).

import 'hammerjs';

Em seu systemjs.config.jsarquivo, você também precisa adicionar a seguinte entrada:

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

junto com, é claro:

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

A outra coisa que está faltando no seu código (pelo menos com base no que você tem no repositório GH) é a inclusão do CSS do Material Design, adicione isso ao seu index.htmlarquivo:

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

Eu espero que isso ajude.

isso funcionou para mim (e isso é com ionic4 também) eu poderia fazer o hammer.js funcionar - e também iônico com material.angular.io (na parte inferior)

Martelo + iônico (martelo + angular também):

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

então

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

então

tsconfig.json - added types as seen below

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

então

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

então

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

Amostra de código do site do 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.");
});

Martelo + iônico + material: para fazer o martelo de material trabalhar com 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 },
]

e voila, seu controle deslizante de material funciona.

Abra sua linha de comando ou PowerShell, digite o diretório do seu projeto angular2:, cd your-project's-rootpressione Enter e cole:

npm install hammerjs --save

O Npm adicionará automaticamente todas as dependências ao seu package.jsonarquivo.

1. npm install hammerjs --save
2. npm install @ types / hammerjs --save-dev

3. adicione isso a typescript.config nas opções do compilador

   "tipos": ["hammerjs"]

4. adicione a app.components.ts:

Instale com

npm install --save hammerjs

ou

yarn add hammerjs

Após a instalação, importe-o no ponto de entrada do seu aplicativo (por exemplo, src / main.ts).

import 'hammerjs';

Guia de primeiros passos de material angular