Javascript 角度-'；找不到HammerJS'；

我正在进行一个简单的angular项目，我试图将材质设计导入到我的项目中，但一些组件工作不正常，控制台警告显示：

找不到HammerJS。某些角材料组件可能无法正常工作。

我安装了

hammerjs

，还安装了

@angular/material

。我如何解决这个问题

旁注 可能值得注意的是，如果您安装了

hammerjs

，并且您的组件仍然没有正确渲染，以确保您使用的是

角度材质
组件，而不是带有
物化css
类的html元素。
如果在
package.json
文件中使用而不是，
，请将其添加到
依赖项中

“hammerjs”：“^2.0.8”

或者，如果您需要另一种自动方式，只需键入
npm i-hammerjs--save
（或
npm ihammerjs@2.0.8--如果需要，请保存
，因为
2.0.8
是现在最新的版本）到根项目文件夹中，然后进行测试，如果问题仍然存在，请尝试删除
node\u modules
文件夹，并通过运行
npm install
将其重新安装到根项目文件夹中，该文件夹将检查
依赖项（其中
hammerjs
驻留），
devdeependencies
。。。，在
package.json
文件中安装它们

也可以在您的
polyfills.ts
中使用（如果没有，建议使用一个）

输入“hammerjs/hammer”

因此，在执行angular应用程序时会发现它，因为在angular应用程序的入口点
main.ts
中导入调用了
polyfills.ts
（在正常情况下，您可以检查它）。
打开命令行或powershell，键入angular2项目的目录：
cd项目的根目录
，点击enter并粘贴：

npm install hammerjs --save

Npm将自动将所有依赖项添加到
package.json
文件中。
在
systemjs.config.js
文件中，您还需要添加以下条目：

'hammerjs'：'npm:hammerjs/hammer.js'，

当然还有：

“@angular/material”：“npm:@angular/material/bundles/material.umd.js”，

代码中缺少的另一件事（至少基于GH repo中的内容）是包含材质设计CSS，请将其添加到
index.html
文件中：


我希望这有帮助。
安装hammerjs


使用npm

npm install --save hammerjs


（或）带有纱线的

yarn add hammerjs



然后在应用程序的入口点（例如src/main.ts）导入
hammerjs



这对我来说很有效（ionic4也是如此）
我可以让hammer.js正常工作，也可以使用material.angular.io（在底部）来实现

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

然后

然后

然后

然后

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

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

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

瞧，您的材质滑块工作正常。
使用安装

npm install --save hammerjs

或

安装后，将其导入应用程序的入口点（例如src/main.ts）


npm安装hammerjs——保存
npm安装@types/hammerjs——保存开发
将其添加到编译器选项下的typescript.config

“类型”：[
“哈默JS”
]

将此添加到app.components.ts：

从Angular 9开始，您需要将
HammerModule
添加到
AppModule
的
imports
数组中。请查找以下示例：

。。。
进口{
浏览器模块，
转让国，
BrowserTransferStateModel，
HammerModule，//将导入语句添加到
polyfills.ts
可以消除警告，这很好！但是材质设计组件仍然没有正确渲染：/I将在问题描述中包括一个屏幕截图。感谢您迄今为止的帮助！没有。但我会在找到解决方案后再次检查。似乎我忘记添加了指向我的
index.html
file.whoopsie.的css链接现在看起来很好。为帮助干杯！我没有使用任何需要
hammer
的组件。有没有办法禁用这些警告？我在测试中得到了大约30个。导入“hammerjs/hammer”；删除警告me@torazaburonpm上的Hammerjs版本将于周五更新因此，OP可以确信，如果他使用npm命令安装hammerjs，它将是最新的，并且运行正常。@torazaburo说实话，我在使用npm安装它时没有使用
--save
，一切都很顺利，但由于你是一个非常有经验的用户，因此与你争论是不明智的。我认为
--save
不再必要了ssary，因为它将自动使用。如果您省略
--save
，它仍然会工作，但不会添加到package.json文件中，这意味着它在将来运行
npm install
时不会自动安装。很抱歉，要花这么长时间才能回复您。我不认为我的项目使用的是systemjs.alth虽然你说得对，我忘了导入css！非常感谢，现在看起来不错！啊，回答得好，我不想认为这可能是很多发现这个问题的人想知道的，这应该是正确的答案。此外，你应该在每个
*.spect.ts
中添加
导入'hammerjs'；
在运行
ng test
时，使用材料组件修复警告的测试文件。我不需要更改
tsconfig.json
，但是导入工作正常，感谢您的回答。如果您必须将导入添加到每个spec文件中，是否有办法将其添加到karma.conf文件中？说明在应用程序上导入
的入口点（例如src/m
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

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 },
]

npm install --save hammerjs

yarn add hammerjs

import 'hammerjs';