在角度 6 中找不到 HammerJS答案

【问题标题】：Could not find HammerJS in angular 6在角度 6 中找不到 HammerJS
【发布时间】：2019-03-06 04:26:18
【问题描述】：

我在我的项目中使用 angular-material。我收到以下警告：

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

“长按”事件无法绑定因为 Hammer.JS 没有加载，也没有自定义加载器指定。

我知道这是question的副本

他们在回答中提到：

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

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

【问题讨论】：

能否添加一些演示/代码来重现问题？
其实我试着给 stackblitz 链接。当我尝试使用 stackblitz 时，它没有显示此警告。
在 cmets 中添加这里？
我有很多组件，我无法找到显示此警告的组件。
我要发package.json 文件吗？

标签： angular angular-material hammer.js

【解决方案1】：

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

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

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

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

【讨论】：

import 'hammerjs'; 已经解决了我的错误，非常感谢，实际上之前我已经在 import {} from 'hammerjs'; 等主模块文件中导入了 (hammerjs)。这是错的吗？？
@PrashanthGH 不。只需导入模块本身。该语法不会导入任何用于项目的内容。但是，导入模块（可能）会导入所有模块。

【解决方案2】：

安装

npm install --save hammerjs

或

yarn add hammerjs

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

import 'hammerjs';

Angular Material Getting Started Guide

【讨论】：

【解决方案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 才能使其生效。

【讨论】：

这有效，请注意必须停止并重新启动项目才能获取此文件。

【解决方案4】：

hammer js的项目全局级添加

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

模块级加法

import * as Hammer from 'hammerjs';

【讨论】：

【解决方案5】：

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

ng add @angular/material

它会问你这样的问题

设置 HammerJS 进行手势识别？

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

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

【讨论】：