角度-’无法找到锤 JS’

小开

最佳答案

In your package.json file add this to dependencies

"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 npm i hammerjs@2.0.8 --save0 by running npm install which will check the dependencies (npm i hammerjs@2.0.8 --save1), devDependencies ..., in package.json file and install them.

Also in your polyfills.ts (recommended to have a one if you have not)

import '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.

小开

Open your command line or powershell, type the directory of your angular2 project: cd your-project's-root, hit enter and paste:

npm install hammerjs --save

Npm will automatically add all dependencies into your package.json file.

小开

In your systemjs.config.js file you also need to add the following entry:

'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:

<link href="https://rawgit.com/angular/material2-builds/master/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

I hope this helps.

小开

Install hammerjs

with npm
```
npm install --save hammerjs
```
(or) with yarn
```
yarn add hammerjs
```

Then import hammerjs on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

小开

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)

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

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.

小开

Install with

npm install --save hammerjs

or

yarn add hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

Angular Material Getting Started Guide

小开

npm install hammerjs --save
npm install @types/hammerjs --save-dev
add this to typescript.config under compiler options

"types": [ "hammerjs" ]
add this to app.components.ts:

小开

Starting from Angular 9 you need to add HammerModule to imports array of your AppModule. Please, find the example below:

...


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 { }

Don't forget to do npm install or yarn add for adding hammerjs to your project. For a more convenient way, it will be better to install @types/hammerjs

小开

Other than importing hammerJS separately,we can provide this gesture recognition feature to yes while installing angular material(version 8) library with the following command.

npm add @angular/material


Set up HammerJS for gesture recognition?-Yes

Verify the 'hammerjs' is imported into main.ts file

角度-’无法找到锤 JS’

旁注