Angular 2 - '找不到HammerJS'

Question

我正在开发一个简单的angular2项目,我正在尝试将Material Design导入到我的项目中,但是有些组件工作不正常,并且控制台警告说:

找不到HammerJS.某些Angular Material组件可能无法正常工作.

我已经hammerjs安装了@angular/material.我该如何解决这个问题？

我的项目可以在这个github回购中找到

边注

值得注意的是,如果您已经hammerjs安装并且组件仍未正确呈现以确保您使用的是angular material 组件而不是带有materialize-css 类的 html元素.如果你正在使用materialize-css的不是angular material,你需要将它单独添加到您的项目.

Answer 1

在您的package.json文件中添加此内容dependencies

"hammerjs":"^ 2.0.8",

或者,如果您想要一种替代自动方式,只需在根项目文件夹中键入npm i hammerjs --save(或者npm i hammerjs@2.0.8 --save如果您需要,因为2.0.8是最新版本)并进行测试,如果问题仍然存在,请尝试删除该文件夹并在根目录中重新安装项目文件夹还通过运行,这将检查(在那里居住),...,在文件和安装它们.node_modulesnpm installdependencieshammerjsdevDependenciespackage.json

也在你的 polyfills.ts(如果你没有,建议有一个)

进口'hammerjs/hammer';

因此,当您的角度应用程序被执行时,它会被发现,因为polyfills.ts它本身是通过导入调用的(在正常情况下,您可以检查它),main.ts其中是角度应用程序的入口点.

Answer 2

使用Angular 5+,

安装hammerjs

• 与npm

  npm install --save hammerjs
  

• (或)用纱线

  yarn add hammerjs
  

然后导入hammerjs应用程序的入口点(例如src/main.ts).

import 'hammerjs';

原始答案

hammerjs通过npm 安装

npm install --save hammerjs

在你的hammerjs进口锤子里,

yarn add hammerjs

然后将hammerjs添加到hammerjs文件中的类型.

import 'hammerjs';

来源:Angular Material 2入门

Answer 3

在您的systemjs.config.js文件中,您还需要添加以下条目:

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

当然还有:

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

您的代码中缺少的另一件事(至少基于GH repo中的内容)是包含Material Design CSS,将其添加到您的index.html文件中:

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

我希望这有帮助.

Answer 4

这对我有用（这也适用于 ionic4）我可以让hammer.js 工作 - 也可以使用 material.angular.io（在底部）

锤子 + 离子（锤子 + 角）：

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

然后

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

然后

tsconfig.json - added types as seen below

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

然后

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

然后

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

来自hammerjs站点的示例代码有效

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

锤子+离子+材料：使材料锤子与离子一起工作

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

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

瞧，你的材质滑块可以工作了。