在角度 6 中找不到 HammerJS

Question

我在我的项目中使用角度材料。 我收到以下警告：

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

无法绑定“longpress”事件，因为 Hammer.JS 未加载且未指定自定义加载程序。

我知道这是这个问题的重复

他们在回答中提到：

我们必须在package.json文件中的dependencies项中添加"^2.0.8", 。
导入'hammerjs/hammer'; 在polyfills.ts文件中。

就我而言，一切都很好，但我仍然在浏览器控制台中收到相同的警告。

Answer 1

有2种方法可以解决这个问题：

在主模块的文件或polyfills.ts中包含 ( main ) 导入：
```
 import 'hammerjs';
```

或者将 CDN 中的脚本包含到您的index.html文件中：

 <head> <!-- ... --> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <!-- ... --> </head>

Answer 2

安装

npm install --save hammerjs

或者

yarn add hammerjs

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

import 'hammerjs';

Angular 材质入门指南

Answer 3

使用 angular6，您可以在 angular.json 文件的 node_modules 中包含hammerjs 路径。

Angular doc说 angular.json 文件的目的是

工作区中所有项目的 CLI 配置默认值，包括 CLI 使用的构建、服务和测试工具的配置选项，例如 TSLint、Karma 和 Protractor。 有关详细信息，请参阅 Angular 工作区配置。

您可以在脚本列表中包含hammerjs 节点模块路径。 请参阅下面的示例：

 "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
            ]
          },
          "configurations": {
          ....

请注意，您必须重新启动 ng serve 才能使其生效。

Answer 4

项目全局级加法hammer js

"scripts": [
              "node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
            ]

模块级加法

import * as Hammer from 'hammerjs';

Answer 5

对于较新版本的 Angular Material，当您安装 Material 时，您只需要运行

ng add @angular/material

它会问你这样的事情

设置 HammerJS 进行手势识别？

您应该回答“Y”，它会自动为您配置 HammerJS。

角材料安装指南： https ://material.angular.io/guide/getting-started#install-angular-material

在角度 6 中找不到 HammerJS

问题描述

5 个解决方案

解决方案1
92 已采纳 2018-10-01 06:23:51

解决方案2
28 2019-06-17 18:25:57

解决方案3
18 2019-01-31 01:44:27

解决方案4
0 2020-10-03 12:55:23

解决方案5
0 2020-12-09 16:17:41

在角度 6 中找不到 HammerJS

问题描述

5 个解决方案

解决方案1 92 已采纳 2018-10-01 06:23:51

解决方案2 28 2019-06-17 18:25:57

解决方案3 18 2019-01-31 01:44:27

解决方案4 0 2020-10-03 12:55:23

解决方案5 0 2020-12-09 16:17:41

解决方案1
92 已采纳 2018-10-01 06:23:51

解决方案2
28 2019-06-17 18:25:57

解决方案3
18 2019-01-31 01:44:27

解决方案4
0 2020-10-03 12:55:23

解决方案5
0 2020-12-09 16:17:41