Angular - 'ไม่พบ HammerJS'

ฉันกำลังทำโปรเจ็กต์เชิงมุมง่ายๆที่ฉันกำลังพยายามนำเข้าดีไซน์ Material เข้ามาในโปรเจ็กต์ของฉัน แต่ส่วนประกอบบางอย่างทำงานไม่ถูกต้องและคำเตือนของคอนโซลบอกว่า:

ไม่พบ HammerJS ส่วนประกอบ Angular Material บางอย่างอาจทำงานไม่ถูกต้อง

ฉันได้รับการติดตั้งและhammerjs @angular/materialฉันจะแก้ไขปัญหานี้ได้อย่างไร

Sidenote

มันอาจจะเป็นที่น่าสังเกตว่าหากคุณมีhammerjsการติดตั้งและอุปกรณ์ของคุณจะยังคงแสดงผลได้อย่างถูกต้องเพื่อให้แน่ใจว่าคุณกำลังใช้angular material ส่วนประกอบและไม่องค์ประกอบ HTML กับการเรียนmaterialize-css หากคุณกำลังใช้materialize-cssแทนangular material, คุณจะต้องเพิ่มในโครงการของคุณต่างหาก

ใน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( ที่hammerjsอยู่ ), devDependencies... , ในpackage.jsonไฟล์และติดตั้ง

ไว้ในของคุณด้วย polyfills.ts(แนะนำให้มีหากคุณไม่มี)

นำเข้า 'hammerjs / ค้อน';

ดังนั้นจึงจะพบได้ในขณะที่ app เชิงมุมของคุณจะถูกดำเนินการมาตั้งแต่polyfills.tsตัวเองถูกเรียกโดยการนำเข้า(ในกรณีปกติอื่น ๆ ที่คุณสามารถตรวจสอบได้)ในmain.tsซึ่งเป็นจุดเริ่มต้นที่แอพพลิเคเชิงมุม

ติดตั้ง hammerjs

• ด้วยnpm

  npm install --save hammerjs
  

• (หรือ) ด้วยเส้นด้าย

  yarn add hammerjs
  

จากนั้นนำเข้าhammerjsที่จุดเริ่มต้นของแอปของคุณ (เช่น src / main.ts)

import 'hammerjs';

ในsystemjs.config.jsไฟล์ของคุณคุณต้องเพิ่มรายการต่อไปนี้:

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

พร้อมกับแน่นอน:

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

สิ่งอื่นที่ขาดหายไปจากโค้ดของคุณ (อย่างน้อยก็ขึ้นอยู่กับสิ่งที่คุณมีใน GH repo) คือการรวม CSS การออกแบบวัสดุเพิ่มสิ่งนี้ลงในindex.htmlไฟล์ของคุณ:

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

ฉันหวังว่านี่จะช่วยได้.

สิ่งนี้ใช้ได้กับฉัน (และนี่ก็ใช้กับ ionic4 เช่นกัน) ฉันสามารถทำให้ hammer.js ทำงานได้ - และไอออนิกด้วย material.angular.io (ที่ด้านล่าง)

Hammer + ionic (ค้อน + เชิงมุมเช่นกัน):

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.");
});

วัสดุ Hammer + ionic +: เพื่อให้ค้อนวัสดุทำงานร่วมกับไอออนิก

in app.module
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { GestureConfig } from '@angular/material';

providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig },
]

และ voila แถบเลื่อนวัสดุของคุณก็ใช้งานได้

เปิดบรรทัดคำสั่งหรือ powershell พิมพ์ไดเร็กทอรีของโครงการ angular2 ของคุณ: cd your-project's-rootกด Enter และวาง:

npm install hammerjs --save

Npm จะเพิ่มการอ้างอิงทั้งหมดลงในpackage.jsonไฟล์ของคุณโดยอัตโนมัติ

1. npm ติดตั้ง hammerjs - บันทึก
2. npm ติดตั้ง @ types / hammerjs --save-dev

3. เพิ่มสิ่งนี้ใน typescript.config ภายใต้ตัวเลือกคอมไพเลอร์

   "types": ["hammerjs"]

4. เพิ่มสิ่งนี้ใน app.components.ts:

ติดตั้งด้วย

npm install --save hammerjs

หรือ

yarn add hammerjs

หลังจากติดตั้งแล้วให้นำเข้าที่จุดเริ่มต้นของแอปของคุณ (เช่น src / main.ts)

import 'hammerjs';

คู่มือการเริ่มต้นใช้งานวัสดุเชิงมุม