[英]Angular 2 - 'Could not find HammerJS'
I'm working on a simple angular2 project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says: 我正在开发一个简单的angular2项目,我正在尝试将Material Design导入到我的项目中,但是有些组件工作不正常,并且控制台警告说:
Could not find HammerJS.
找不到HammerJS。 Certain Angular Material components may not work correctly.
某些Angular Material组件可能无法正常工作。
I have hammerjs
installed and also @angular/material
. 我安装了
hammerjs
,还有@angular/material
。 How do I resolve this issue? 我该如何解决这个问题?
My project can be found at this github repo 我的项目可以在这个github回购中找到
It may be worth noting that if you have hammerjs
installed and your components are still not rendering correctly to make sure you are using angular material 2
components and not html elements with materialize-css
classes . 值得注意的是,如果你安装了
hammerjs
并且你的组件仍然无法正确渲染,以确保你使用的是angular material 2
组件,而不是使用带有materialize-css
类的 html元素。 If you are using materialize-css
instead of angular material 2
, you will need to add it to your project separately. 如果您使用的
materialize-css
,而不是angular material 2
, 你需要将它单独添加到您的项目。
In your package.json
file add this to dependencies
在
package.json
文件中,将其添加到dependencies
"hammerjs": "^2.0.8",
“hammerjs”:“^ 2.0.8”,
Or if you want an alternative automatic way just you can type npm i hammerjs --save
(or npm i hammerjs@2.0.8 --save
if you want, since 2.0.8
is the latest version nowdays) in your root project folder and test then, if the problem still occurring try to delete the node_modules
folder and reinstall it in the root project folder also by running npm install
which will check the dependencies
( where hammerjs
resides ), devDependencies
..., in package.json
file and install them. 或者,如果你想要一种替代的自动方式,你可以在根项目文件夹中输入
npm i hammerjs --save
(或npm i hammerjs@2.0.8 --save
如果你愿意,保存,因为2.0.8
是最新版本的日期) 。测试然后,如果问题仍然发生尝试删除node_modules
文件夹并在root项目文件夹中重新安装它也通过运行npm install
来检查dependencies
( 其中hammerjs
所在的位置 ), devDependencies
...,在package.json
文件中并安装他们。
Also in your polyfills.ts
(recommended to have a one if you have not) 也可以在你的
polyfills.ts
(如果你没有,建议有一个)
import 'hammerjs/hammer';
进口'hammerjs / hammer';
Thus, it would be found while your angular app is executed since polyfills.ts
itself is called by import (in a normal case, else you can check it) in main.ts
which is the angular apps' entry point. 因此,可以在执行角度应用程序时找到它,因为
polyfills.ts
本身是通过import (在正常情况下,你可以检查它)在main.ts
中main.ts
,这是角度应用程序的入口点。
Install hammerjs 安装hammerjs
with npm 与npm
npm install --save hammerjs
(or) with yarn (或)用纱线
yarn add hammerjs
Then import hammerjs
on your app's entry point (eg src/main.ts). 然后在应用程序的入口点导入
hammerjs
(例如src / main.ts)。
import 'hammerjs';
Install hammerjs
via npm 通过npm安装
hammerjs
npm install --save hammerjs
npm install --save-dev @types/hammerjs
In your src/app/app.module.ts
import hammerjs, 在你的
src/app/app.module.ts
导入hammerjs,
import 'hammerjs';
Then add hammerjs to the types in your tsconfig.json
file. 然后将hammerjs添加到
tsconfig.json
文件中的类型。
{
"compilerOptions": {
"types": [
"hammerjs"
]
}
}
source: Get started with Angular Material 2 来源: Angular Material 2入门
In your systemjs.config.js
file you also need to add the following entry: 在
systemjs.config.js
文件中,您还需要添加以下条目:
'hammerjs': 'npm:hammerjs/hammer.js',
along with of course: 当然还有:
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
The other thing that's missing from your code (at least based on what you have in the GH repo) is the inclusion of the Material Design CSS, add this to your index.html
file: 您的代码中缺少的另一件事(至少基于您在GH repo中的内容)是包含Material Design CSS,将其添加到您的
index.html
文件中:
<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
I hope this helps. 我希望这有帮助。
this worked for me (and this is with ionic4 as well) I could make hammer.js work - and also ionic with material.angular.io (in the bottom) 这对我有用(这也是使用ionic4)我可以使hammer.js工作 - 并且还可以使用material.angular.io(在底部)
Hammer + ionic (hammer + angular as well): 锤子+离子(锤子+角度):
npm install --save hammerjs
npm install --save @types/hammerjs
then 然后
package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",
then 然后
tsconfig.json - added types as seen below
"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}
then 然后
in app.component.ts (only there)
import 'hammerjs';
then 然后
in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file
Sample code from hammerjs site works 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.");
});
Hammer+ionic+material: to make material hammer work with ionic 锤子+离子+材料:使材料锤子与离子一起工作
in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]
and voila, your material slider works. 瞧,您的材质滑块有效。
Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root
, hit enter and paste: 打开命令行或powershell,键入angular2项目的目录:
cd your-project's-root
project's cd your-project's-root
,点击输入并粘贴:
npm install hammerjs --save
Npm will automatically add all dependencies into your package.json
file. Npm会自动将所有依赖项添加到
package.json
文件中。
add this to typescript.config under compiler options 将此添加到编译器选项下的typescript.config
"types": [ "hammerjs" ] “类型”:[“hammerjs”]
add this to app.components.ts: 将此添加到app.components.ts:
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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.