在角度 6 中找不到 HammerJS
[英]Could not find HammerJS in angular 6
问题描述
I use angular-material in my project.
我在我的项目中使用角度材料。 I am getting this warnings:我收到以下警告：
Could not find HammerJS.
The "longpress" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
I know this is a duplicate of this question我知道这是这个问题的重复
In the answer they have mentioned that:他们在回答中提到：
- We have to add
"^2.0.8",todependenciesin package.json file.我们必须在package.json文件中的dependencies项中添加"^2.0.8",。 - import
'hammerjs/hammer';导入'hammerjs/hammer';in polyfills.ts file.在polyfills.ts文件中。
In my case everything is fine, still I am getting the same warning in browser console.就我而言，一切都很好，但我仍然在浏览器控制台中收到相同的警告。
5 个解决方案
解决方案1
92 已采纳 2018-10-01 06:23:51
There are 2 ways to solve this problem:有2种方法可以解决这个问题：
Either include the ( main ) import in your main module's file or
polyfills.ts:在主模块的文件或polyfills.ts中包含 ( main ) 导入：import 'hammerjs';Or include the script from a CDN into your
index.htmlfile:或者将 CDN 中的脚本包含到您的index.html文件中：<head> <!-- ... --> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <!-- ... --> </head>
解决方案2
28 2019-06-17 18:25:57
Install with安装
npm install --save hammerjs
or或者
yarn add hammerjs
After installing, import it on your app's entry point (eg src/main.ts).安装后，将其导入应用程序的入口点（例如 src/main.ts）。
import 'hammerjs';
解决方案3
18 2019-01-31 01:44:27
with angular6, you can include hammerjs path in node_modules in angular.json file.使用 angular6，您可以在 angular.json 文件的 node_modules 中包含hammerjs 路径。
Angular doc says that the purpose of angular.json file is Angular doc说 angular.json 文件的目的是
CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor.
You can include hammerjs node module path in the script list.您可以在脚本列表中包含hammerjs 节点模块路径。 see below for an example:请参阅下面的示例：
"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": {
....
Note that you have to restart ng serve for it to take effect.请注意，您必须重新启动 ng serve 才能使其生效。
解决方案4
0 2020-10-03 12:55:23
Project global level addition of hammer js项目全局级加法hammer js
"scripts": [
"node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
]
Module level Addition模块级加法
import * as Hammer from 'hammerjs';
解决方案5
0 2020-12-09 16:17:41
For newer versions of Angular Material, when you install Material you just need to run对于较新版本的 Angular Material，当您安装 Material 时，您只需要运行
ng add @angular/material
It will ask you something like this它会问你这样的事情
Set up HammerJS for gesture recognition?
You should answer "Y" and it will automatically configure HammerJS for you.您应该回答“Y”，它会自动为您配置 HammerJS。
Angular Material Installation Guide: https://material.angular.io/guide/getting-started#install-angular-material角材料安装指南： https ://material.angular.io/guide/getting-started#install-angular-material
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.