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


94

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.

Respostas:


162

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 hammerjs@2.0.8 --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.


9
adicionar a instrução import para polyfills.tssilenciar o aviso, o que é ótimo! Mas os componentes do material design ainda não estão renderizando corretamente: / Incluirei uma captura de tela na descrição da pergunta. Obrigado pela vossa ajuda até agora!
Danoram

2
não. mas voltarei a verificar assim que encontrar uma solução.
Danoram

2
Parece que esqueci de adicionar o link css ao meu index.htmlarquivo. opsie .. Tudo parece bem agora. Felicidades pela ajuda!
Danoram

3
Não estou usando nenhum dos componentes necessários hammer. Existe uma maneira de desativar esses avisos? Eu recebo cerca de 30 desses em meus testes.
CWSpear

1
importar 'hammerjs / hammer'; aviso removido para mim
silentsudo,

102

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




1
ah, boa resposta, não me importava em pensar que isso é provavelmente o que muitas pessoas que acham essa pergunta podem querer saber
Danoram

7
Esta deve ser a resposta certa. Além disso, você deve adicionar import 'hammerjs';todos *.spect.tsos arquivos de teste que usam componentes materiais para corrigir o aviso durante a execução ng test.
Cartucho de

3
Não precisei alterar o tsconfig.jsonmas a importação funciona, obrigado pela resposta.
Espúrio de

se você tiver que adicionar a importação a todos os arquivos de especificação, não deveria haver uma maneira de adicioná-la ao arquivo karma.conf?
Jeff

A fonte citada diz em import it on your app's entry point (e.g. src/main.ts)vez de em app.module.ts. Obviamente, isso não importa de qualquer maneira.
Stack Underflow

9

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.


Desculpe demorar tanto para entrar em contato com você. Não acho que meu projeto esteja usando o systemjs. embora você esteja certo sobre eu ter esquecido de importar o css! muito obrigado agora está parecendo certo!
Danoram

6

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.


3

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.


A versão de @torazaburo Hammerjs no npm está sendo atualizada frequentemente, então o OP pode ter certeza de que se ele instalar o hammerjs usando o comando npm, ele estará atualizado e funcionando.
gentil usuário

@torazaburo Para ser sincero, não usei --savedurante a instalação pelo npm e tudo correu bem, mas como você é um usuário muito experiente, seria imprudente discutir com você.
gentil usuário

Acho que --savenão é mais necessário porque será usado automaticamente. docs.npmjs.com/cli/install
Spurious de

1
Se você omitir o, --saveele ainda funcionará, mas não será adicionado ao arquivo package.json, o que significa que não será instalado automaticamente ao ser executado npm installno futuro
Niklas

2
  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:

hammerjs


VOCÊ, senhor, é um salvador e se algum dia eu conseguir ter um segundo filho, ele receberá o seu nome!
codingbuddha

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.