Angular - '找不到 HammerJS'

Posted 2023-02-22

【中文标题】Angular - \'找不到 HammerJS\'

【英文标题】：Angular - 'Could not find HammerJS'Angular - '找不到 HammerJS'

【发布时间】：2017-05-10 09:44:54

【问题描述】：

我正在处理一个简单的 Angular 项目，我正在尝试将 Material Design 导入我的项目，但某些组件无法正常工作，并且控制台警告说：

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

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

旁注

值得注意的是，如果您安装了hammerjs，但您的组件仍未正确呈现，请确保您使用的是angular material 组件，而不是带有materialize-css 的html 元素类。 如果您正在使用materialize-css 而不是angular material，you will need to add it to your project separately.

【参考方案1】：

在您的 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（其中@ 987654329@ 驻留），devDependencies ...，在package.json 文件中并安装它们。

在你的polyfills.ts 也有（如果你没有的话，建议有一个）

导入'hammerjs/hammer';

因此，它会在您的 Angular 应用程序执行时被发现，因为 polyfills.ts 本身是通过 import 调用的（在正常情况下，您可以检查它） in main.ts 这是Angular 应用的入口点。

【讨论】：

将 import 语句添加到 polyfills.ts 可以使警告静音，这很棒！但是材料设计组件仍然无法正确渲染：/我将在问题描述中包含屏幕截图。感谢您迄今为止的帮助！

没有。但一旦找到解决方案，我一定会回来查看的。

似乎我忘了将 css 链接添加到我的 index.html 文件中。哎呀..现在一切看起来都很好。为帮助干杯！

我没有使用任何需要hammer 的组件。有没有办法禁用这些警告？在我的测试中，我得到了大约 30 个。

导入'hammerjs/hammer';为我删除了警告

【参考方案2】：

安装hammerjs

使用 npm

npm install --save hammerjs

（或）与 yarn

yarn add hammerjs

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

import 'hammerjs';

【讨论】：

啊，好答案，我没想到这可能是很多发现这个问题的人可能想知道的

这应该是正确的答案。此外，您应该在每个使用材料组件的*.spect.ts 测试文件中添加import 'hammerjs';，以修复运行ng test 时的警告。

我不需要更改tsconfig.json，但导入工作正常，感谢您的回答。

如果您必须将导入添加到每个规范文件，不应该有办法将其添加到 karma.conf 文件吗？

cited source 对 import it on your app's entry point (e.g. src/main.ts) 表示，而不是在 app.module.ts 中。显然，这实际上并不重要。

【参考方案3】：

在您的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">

我希望这会有所帮助。

【讨论】：

很抱歉这么久才回复您。我认为我的项目没有使用 systemjs。虽然你对我忘记导入 CSS 是对的！非常感谢，现在看起来不错！

【参考方案4】：

这对我有用（这也适用于 ionic4） 我可以让hammer.js 工作——也可以用material.angular.io 进行离子（在底部）

锤子+离子（锤子+角度）：

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 ,
]

瞧，您的材质滑块工作正常。

【参考方案5】：

打开你的命令行或者powershell，输入你的angular2项目目录：cd your-project's-root，回车粘贴：

npm install hammerjs --save

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

【讨论】：

@torazaburo Hammerjs 在 npm 上的版本经常更新，因此 OP 可以确定如果他使用 npm 命令安装hammerjs，它将是最新的和工作的。

@torazaburo 老实说，我在通过 npm 安装它时没有使用--save，一切都很顺利，但由于您是一个非常有经验的用户，因此与您争论是不谨慎的。跨度>

我认为--save 不再需要，因为它会被自动使用。 docs.npmjs.com/cli/install

如果省略--save，它仍然可以工作，但不会添加到package.json文件中，这意味着以后运行npm install时不会自动安装它

【参考方案6】：

安装

npm install --save hammerjs

或

yarn add hammerjs

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

import 'hammerjs';

Angular Material Getting Started Guide

【参考方案7】：

npm installhammerjs --save npm install @types/hammerjs --save-dev

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

“类型”：[ “锤子” ]

将此添加到 app.components.ts：

【讨论】：

先生，你是救世主，如果我能得到第二个儿子，他将以你的名字命名！

【参考方案8】：

从 Angular 9 开始，您需要将 HammerModule 添加到您的 AppModule 的 imports 数组中。请找到以下示例：

...

import 
  BrowserModule,
  TransferState,
  BrowserTransferStateModule,
  HammerModule, // <-- Hammer Module
 from '@angular/platform-browser';

...

@NgModule(
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule,
    AppRoutingModule,
    HammerModule, // <-- Hammer Module
  ],
  bootstrap: [AppComponent],
)
export class AppModule  

不要忘记使用npm install 或yarn add 将hammerjs 添加到您的项目中。为了更方便，最好安装@types/hammerjs

【参考方案9】：

除了单独导入hammerJS外，我们可以在安装angular material(version 8)库时提供这个手势识别功能，使用以下命令。

npm add @angular/material

Set up HammerJS for gesture recognition?-Yes 

验证 'hammerjs' 是否导入到 main.ts 文件中

【讨论】：

hammerjs 不再被 Angular Material 使用。

指定版本号以避免混淆