Angular - “找不到 HammerJS”

JS

Angular 应用中解决“找不到 HammerJS”错误

在开发 Angular 应用时，有时会遇到一个常见的错误信息：“找不到 HammerJS”。这通常是因为在应用中使用了 Angular Material 或 Angular CDK（Component Dev Kit）的组件，而这些组件依赖于 HammerJS。HammerJS 是一个 JavaScript 库，用于处理触摸手势和鼠标事件，它被 Angular Material 和 Angular CDK 用于实现一些交互式功能，如滑动、拖放等。当 Angular 项目尝试使用这些组件但没有正确配置 HammerJS 时，就会出现这个错误。

错误的来源

造成“找不到 HammerJS”错误的原因通常是由于未正确安装或配置 HammerJS 库。在 Angular 应用中使用 Angular Material 或 Angular CDK 时，这两个库依赖于 HammerJS 来处理用户的手势输入。若在安装这些库后未手动安装 HammerJS 或者配置未正确完成，就会导致应用在运行时无法找到 HammerJS 而抛出错误。

解决方法

解决“找不到 HammerJS”错误有几种常见方法：

1. 手动安装 HammerJS： 在 Angular 项目中，可以使用 npm 或 yarn 来手动安装 HammerJS。在命令行中运行以下命令：

bash
npm install hammerJS

或者

bash
yarn add hammerJS

安装完成后，确保在项目中正确引入 HammerJS。通常在 Angular 的 mAIn.ts 文件中引入是一个不错的选择：

typescript
import 'hammerJS';

2. 在 Angular.JSon 中添加 HammerJS 的引用： 另一种方法是在 Angular 项目的 angular.JSon 文件中添加 HammerJS 的引用。在 "scripts" 数组中添加 HammerJS 的路径，以确保 Angular CLI 可以在构建项目时包含该库：

JSon
"scripts": [
  "node_modules/hammerJS/hammer.min.JS"
]

3. 在 mAIn.ts 中设置 HammerJS 的全局配置（可选）： 如果需要对 HammerJS 进行全局配置，可以在 mAIn.ts 文件中对其进行设置。例如：

typescript
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerJS';
export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    // 设置 HammerJS 的配置
    // 例如，更改触发手势的阈值等
  };
}
// 在 providers 数组中提供自定义的 HammerJS 配置
providers: [
  {
    provide: HAMMER_GESTURE_CONFIG,
    useClass: MyHammerConfig,
  },
],

确保正确安装并配置 HammerJS 是解决“找不到 HammerJS”错误的关键。无论是手动安装 HammerJS，还是通过在 Angular.JSon 中添加引用，都可以解决这个错误。在使用 Angular Material 或 Angular CDK 时，确保 HammerJS 正确配置可以确保应用程序顺利运行，并且可以利用其提供的交互功能。