Angular

Question

我正在开发一个简单的 angular 项目，我试图将 Material 设计导入到我的项目中，但某些组件无法正常工作，控制台警告说：

Could not find HammerJS. Certain Angular Material components may not work correctly.

我安装了 hammerjs 和 @angular/material。我该如何解决这个问题？

旁注

可能值得注意的是，如果您安装了 hammerjs 但您的组件仍然无法正确呈现，以确保您使用的是 angular material components而不是具有 materialize-css 类的 html 元素。如果您正在使用materialize-css instead of angular material, you will need to add it to your project separately.

Answer 1

在您的 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（ hammerjs 所在 ），devDependencies ...，在 package.json 文件并安装它们。

也在你的 polyfills.ts 中（如果你没有，建议拥有一个）

import 'hammerjs/hammer';

因此，它会在您的 angular 应用程序执行时被发现，因为 polyfills.ts 本身是通过 import 调用的（在正常情况下，否则您可以检查它） in main.ts 这是 angular 应用程序的入口点。

Answer 2

打开命令行或 powershell，输入 angular2 项目的目录：cd your-project's-root，回车并粘贴：

npm install hammerjs --save

Npm 会自动将所有依赖项添加到您的 package.json 文件中。

Answer 3

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

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

当然还有：

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

您的代码中缺少的另一件事（至少基于您在 GH 存储库中的内容）是包含 Material 设计 CSS，将其添加到您的 index.html 文件:

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

希望对您有所帮助。

Answer 4

安装 hammerjs

与 npm
```
npm install --save hammerjs
```
(或)与yarn
```
yarn add hammerjs
```

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

import 'hammerjs';

Answer 5

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

锤子 + 离子（锤子 + angular）：

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

锤子+离子+material：使 material hammer 与 ionic

一起工作

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

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

瞧，你的 material 滑块起作用了。

Answer 6

安装

npm install --save hammerjs

或

yarn add hammerjs

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

import 'hammerjs';

Angular Material Getting Started Guide

Answer 7

npm 安装 hammerjs --save
npm install @types/hammerjs --save-dev
将此添加到编译器选项下的 typescript.config

"types":[ "hammerjs" ]
将此添加到 app.components.ts：

Answer 8

从 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

会更好

Answer 9

除了单独引入hammerJS之外，我们可以在安装angular material（版本8）库的时候提供这个手势识别功能给yes，命令如下。

npm add @angular/material

Set up HammerJS for gesture recognition?-Yes

验证 'hammerjs' 已导入到 main.ts 文件

Angular - 'Could not find HammerJS'

Angular - 'Could not find HammerJS'

javascript

hammer.js

material-design

旁注