Angular-'找不到HammerJS'

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

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

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

边注

可能值得注意的是，如果您已hammerjs安装并且组件仍无法正确呈现，请确保您使用的是angular material 组件，而不是带有materialize-css 类的 html元素。如果你正在使用materialize-css的不是angular material，你需要将它单独添加到您的项目。

在您的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（如果没有，建议有一个）

导入'hammerjs / hammer';

因此，将在执行有角度的应用程序时找到它，因为polyfills.ts它是由导入（通常情况下，您可以检查）调用的，main.ts这是有角度的应用程序的入口点。

安装Hammerjs

• 与npm

  npm install --save hammerjs

• （或）用纱

  yarn add hammerjs

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

import 'hammerjs';

在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一起使用ionic（在底部）

锤+离子（以及锤+角锤）：

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，按Enter键并粘贴：

npm install hammerjs --save

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

1. npm install Hammerjs-保存
2. npm install @ types / hammerjs --save-dev

3. 将此添加到编译器选项下的typescript.config

   “ types”：[“ hammerjs”]

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

与安装

npm install --save hammerjs

要么

yarn add hammerjs

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

import 'hammerjs';

角材料入门指南