Angular 2 - '找不到HammerJS'

Question

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

  

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

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

我的项目可在此github repo

找到

旁注

值得注意的是，如果您安装了hammerjs并且您的组件仍未正确呈现，以确保您使用的是angular material 2 组件，而不是html元素materialize-css 类。 如果 使用materialize-css代替angular material 2，you will need to add it to your project separately.

Answer 1

在package.json文件中，将其添加到dependencies

  

＆＃34; hammerjs＆＃34;：＆＃34; ^ 2.0.8＆＃34;，

或者，如果您想要一种替代自动方式，只需键入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＆＃39; hammerjs / hammer＆＃39;;

因此，当您执行角度应用程序时会找到它，因为polyfills.ts本身是由导入调用的（在正常情况下，您可以检查它） {{1}这是角度应用程序＆＃39;切入点。

Answer 2

使用最新的Angular版本

安装hammerjs

• npm

  npm install --save hammerjs
  

• （或）纱线

  yarn add hammerjs
  

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

import 'hammerjs';

<小时/>

原始答案（Angular 5下面的版本）

通过npm

安装hammerjs

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

在 src/app/app.module.ts 导入hammerjs中，

import 'hammerjs';

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

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

来源：Get started with 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 },
]

瞧，您的材质滑块会起作用。

Answer 5

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

npm install hammerjs --save

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

Answer 6

1. npm安装Hammerjs --save
2. npm install @ types / hammerjs --save-dev

3. 在编译器选项下将其添加到typescript.config

   “类型”：[       “ hammerjs”     ]

4. 将此添加到app.components.ts：

Answer 7

安装

npm install --save hammerjs

或

yarn add hammerjs

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

import 'hammerjs';

Angular Material Getting Started Guide

Answer 8

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

...

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(version 8)库时使用以下命令将这个手势识别功能提供给yes。

npm add @angular/material

Set up HammerJS for gesture recognition?-Yes 

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