Angular 2 - '找不到HammerJS'

Question

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

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

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

我的项目可以在这个github回购中找到

边注

值得注意的是，如果你安装了hammerjs并且你的组件仍然无法正确渲染，以确保你使用的是angular material 2 组件，而不是使用带有materialize-css 类的 html元素。 如果您使用的 materialize-css ，而不是angular material 2 ， 你需要将它单独添加到您的项目。

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文件夹并在root项目文件夹中重新安装它也通过运行npm install来检查dependencies （ 其中hammerjs所在的位置 ）， devDependencies ...，在package.json文件中并安装他们。

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

进口'hammerjs / hammer';

因此，可以在执行角度应用程序时找到它，因为polyfills.ts本身是通过import （在正常情况下，你可以检查它）在main.ts中main.ts ，这是角度应用程序的入口点。

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

来源： 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 project's 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';

角度材料入门指南