Hoekig – ‘Kon HammerJS niet vinden’

Ik werk aan een eenvoudig hoekig project waarbij ik Material Design in mijn project probeer te importeren, maar sommige componenten werken niet goed en een consolewaarschuwing zegt:

Kon HammerJS niet vinden. Bepaalde Angular Material-componenten werken mogelijk niet correct.

Ik heb hammerjsgeïnstalleerd en ook @angular/material. Hoe los ik dit probleem op?

Kanttekening

Het is misschien de moeite waard om op te merken dat als je hammerjshebt geïnstalleerd en je componenten nog steeds niet correct worden weergegeven, om er zeker van te zijn dat je angular materialcomponentenen niet html-elementen met materialize-cssklassen.
Als u gebruiktmaterialize-cssin plaats van angular material, je moet het apart aan je project toevoegen.

Antwoord 1, autoriteit 100%

Voeg dit in uw package.json-bestand toe aan dependencies

“hammerjs”: “^2.0.8”,

Of als je een alternatieve automatische manier wilt, typ je gewoon npm i hammerjs --save(of npm i [email protected] --saveals je wilt , aangezien 2.0.8tegenwoordig de nieuwste versie is) in je hoofdprojectmapen test dan, als het probleem zich blijft voordoen, probeer de node_modulesmap en installeer deze opnieuw in de hoofdprojectmapdoor npm installuit te voeren, waarmee de dependenciesworden gecontroleerd (waar hammerjsresides), devDependencies…, in het bestand package.jsonen installeer ze.

Ook in je polyfills.ts(aanbevolen om er een te hebben als je die nog niet hebt)

import ‘hammerjs/hammer’;

Het zou dus worden gevonden terwijl uw hoekige app wordt uitgevoerd, aangezien polyfills.tszelf wordt aangeroepen door import (in een normaal geval, anders kunt u het controleren)in main.tswat het beginpunt van de hoekige apps is.

Antwoord 2, autoriteit 63%

Installeer hammerjs

• met npm

  npm install --save hammerjs
  

• (of) met garen

  yarn add hammerjs
  

Importeer vervolgens hammerjsop het toegangspunt van uw app (bijv. src/main.ts).

import 'hammerjs';

Antwoord 3, autoriteit 5%

In uw systemjs.config.js-bestand moet u ook het volgende item toevoegen:

'hammerjs': 'npm:hammerjs/hammer.js',

samen met natuurlijk:

'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

Het andere dat ontbreekt in uw code (tenminste gebaseerd op wat u in de GH-repo hebt) is de opname van de Material Design CSS, voeg dit toe aan uw index.html-bestand:

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

Ik hoop dat dit helpt.

Antwoord 4, autoriteit 4%

dit werkte voor mij (en dit is ook met ionic4)
Ik zou hammer.js kunnen laten werken – en ook ionisch met material.angular.io (onderaan)

Hamer + ionisch (ook hamer + hoekig):

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

dan

package.json
make sure in dependencies there is this line
"hammerjs": "^2.0.8",

dan

tsconfig.json - added types as seen below
"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

dan

in app.component.ts (only there)
import 'hammerjs';

dan

in html file (I just took out the first and last < > signs)
div id="myElement"></div
in .ts file

Voorbeeldcode van de site van 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.");
});

Hamer+ionisch+materiaal:
om materiaalhamer met ionisch te laten werken

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';
providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

en voila, je materiële slider werkt.

Antwoord 5, autoriteit 2%

Open je opdrachtregel of powershell, typ de map van je angular2-project: cd your-project's-root, druk op enter en plak:

npm install hammerjs --save

Npm voegt automatisch alle afhankelijkheden toe aan uw package.json-bestand.

Antwoord 6

Installeer met

npm install --save hammerjs

of

yarn add hammerjs

Importeer het na de installatie op het toegangspunt van uw app (bijv. src/main.ts).

import 'hammerjs';

Aan de slag-gids voor hoekmateriaal

Antwoord 7

1. npm install hammerjs –save
2. npm install @types/hammerjs –save-dev

3. voeg dit toe aan typescript.config onder compileropties

   “soorten”: [
   “hamer”
   ]

4. voeg dit toe aan app.components.ts:

Antwoord 8

Vanaf Angular 9 moet u HammerModuletoevoegen aan de imports-array van uw AppModule. Zoek het onderstaande voorbeeld:

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

Vergeet niet om npm installof yarn adduit te voeren om hammerjs aan je project toe te voegen. Voor een gemakkelijkere manier is het beter om @types/hammerjs

Antwoord 9

Behalve door hammerJS afzonderlijk te importeren, kunnen we deze functie voor gebarenherkenning aan ja bieden tijdens het installeren van de bibliotheek met hoekig materiaal (versie 8) met de volgende opdracht.

npm add @angular/material
Set up HammerJS for gesture recognition?-Yes 

Controleer of de ‘hammerjs’ is geïmporteerd in het main.ts-bestand