Question

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

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

“ longpress”事件无法绑定   因为没有加载Hammer.JS，并且没有自定义加载器   指定。

我知道这是此question

的副本

他们在回答中提到：

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

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

Answer 1

有两种方法可以解决此问题：

在主模块的文件或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

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

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

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

您可以在脚本列表中包含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 3

安装

npm install --save hammerjs

或

yarn add hammerjs

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

import 'hammerjs';

Angular Material Getting Started Guide

Answer 4

添加锤子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 个答案: