Angular 2 - '找不到HammerJS'

Question

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

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

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

我的项目可以在这个github repo找到

嫣

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

Answer 1

在你的package.json文件中将此添加到dependencies

“锤冰”：“^ 2.0.8”，

或者如果你想要一种替代的自动方式，你可以在你的根项目文件夹中键入npm i hammerjs --save（或npm i [email protected] --save，如果你想，因为2.0.8是最新版本）并测试然后，如果问题仍然发生，试着删除node_modules文件夹并重新安装它在根项目文件夹中也通过运行npm install来检查dependencies（hammerjs所在的位置），devDependencies ...，在package.json文件中并安装它们。

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

进口'hammerjs / hammer';

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

Answer 2

With latest Angular versions,

安装hammerjs

• 与npm npm install --save hammerjs
• （或）用纱线 yarn add hammerjs

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

import 'hammerjs';

---

Original Answer (versions below Angular 5)

通过npm安装hammerjs

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

在你的src/app/app.module.ts进口锤子，

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 install 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