我正在处理一个简单的 Angular 项目，我正在尝试将 Material Design 导入我的项目，但某些组件无法正常工作，并且控制台警告说：
找不到 HammerJS。某些 Angular Material 组件可能无法正常工作。
我安装了hammerjs 和@angular/material。我该如何解决这个问题？
值得注意的是，如果您安装了hammerjs，但您的组件仍未正确呈现，请确保您使用的是angular material 组件，而不是带有materialize-css 的html 元素类。
如果您正在使用materialize-css 而不是angular material，you will need to add it to your project separately.
【问题讨论】：
标签： javascript angular material-design hammer.js
在您的 package.json 文件中将此添加到 dependencies
"hammerjs": "^2.0.8",
或者，如果您想要一种替代的自动方式，您可以在您的根项目文件夹中输入 npm i hammerjs --save（或 npm i hammerjs@2.0.8 --save，因为 2.0.8 是当今的最新版本）在您的根项目文件夹中和然后进行测试，如果问题仍然存在，请尝试删除node_modules 文件夹并通过运行npm install 将其重新安装到根项目文件夹，这将检查dependencies（其中@ 987654329@ 驻留），devDependencies ...，在package.json 文件中并安装它们。
在你的polyfills.ts 也有（如果你没有的话，建议有一个）
导入'hammerjs/hammer';
因此，它会在您的 Angular 应用程序执行时被发现，因为 polyfills.ts 本身是通过 import 调用的（在正常情况下，您可以检查它） in main.ts 这是Angular 应用的入口点。
【讨论】：
polyfills.ts 可以使警告静音，这很棒！但是材料设计组件仍然无法正确渲染：/我将在问题描述中包含屏幕截图。感谢您迄今为止的帮助！
index.html 文件中。哎呀..现在一切看起来都很好。为帮助干杯！
hammer 的组件。有没有办法禁用这些警告？在我的测试中，我得到了大约 30 个。
安装hammerjs
使用 npm
npm install --save hammerjs
（或）与 yarn
yarn add hammerjs
然后在您应用的入口点（例如 src/main.ts）上导入 hammerjs。
import 'hammerjs';
【讨论】：
*.spect.ts 测试文件中添加import 'hammerjs';，以修复运行ng test 时的警告。
tsconfig.json，但导入工作正常，感谢您的回答。
import it on your app's entry point (e.g. src/main.ts) 表示，而不是在 app.module.ts 中。显然，这实际上并不重要。
在您的systemjs.config.js 文件中，您还需要添加以下条目：
'hammerjs': 'npm:hammerjs/hammer.js',
当然还有：
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
您的代码中缺少的另一件事（至少基于您在 GH 存储库中的内容）是包含 Material Design CSS，将其添加到您的 index.html 文件中：
<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
我希望这会有所帮助。
【讨论】：
这对我有用（这也适用于 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 },
]
瞧，您的材质滑块工作正常。
【讨论】：
打开你的命令行或者powershell，输入你的angular2项目目录：cd your-project's-root，回车粘贴：
npm install hammerjs --save
Npm 会自动将所有依赖项添加到您的 package.json 文件中。
【讨论】：
--save，一切都很顺利，但由于您是一个非常有经验的用户，因此与您争论是不谨慎的。跨度>
--save 不再需要，因为它会被自动使用。 docs.npmjs.com/cli/install
--save，它仍然可以工作，但不会添加到package.json文件中，这意味着以后运行npm install时不会自动安装它
安装
npm install --save hammerjs
或
yarn add hammerjs
安装后，将其导入应用的入口点（例如 src/main.ts）。
import 'hammerjs';
【讨论】：
从 Angular 9 开始，您需要将 HammerModule 添加到您的 AppModule 的 imports 数组中。请找到以下示例：
...
import {
BrowserModule,
TransferState,
BrowserTransferStateModule,
HammerModule, // <-- Hammer Module
} from '@angular/platform-browser';
...
@NgModule({
declarations: [
AppComponent,
],
imports: [
HttpClientModule,
AppRoutingModule,
HammerModule, // <-- Hammer Module
],
bootstrap: [AppComponent],
})
export class AppModule { }
不要忘记使用npm install 或yarn add 将hammerjs 添加到您的项目中。为了更方便，最好安装@types/hammerjs
【讨论】：
除了单独导入hammerJS外，我们可以在安装angular material(version 8)库时提供这个手势识别功能，使用以下命令。
npm add @angular/material
Set up HammerJS for gesture recognition?-Yes
验证 'hammerjs' 是否导入到 main.ts 文件中
【讨论】：