Angular - 'Không thể tìm thấy HammerJS'

Tôi đang làm việc trên một dự án góc cạnh đơn giản, nơi tôi đang cố gắng nhập Material Design vào dự án của mình nhưng một số thành phần không hoạt động bình thường và một cảnh báo trên bảng điều khiển cho biết:

Không thể tìm thấy HammerJS. Một số thành phần Vật liệu góc có thể hoạt động không chính xác.

Tôi đã hammerjscài đặt và cả @angular/material. Làm cách nào để giải quyết vấn đề này?

Chú thích

Có thể cần lưu ý rằng nếu bạn đã hammerjscài đặt và các thành phần của bạn vẫn không hiển thị chính xác để đảm bảo rằng bạn đang sử dụng angular material các thành phần chứ không phải các phần tử html với materialize-css các lớp . Nếu bạn đang sử dụng materialize-cssthay vì angular material, bạn sẽ cần thêm nó vào dự án của mình một cách riêng biệt.

Trong package.jsontệp của bạn, hãy thêm cái này vàodependencies

"hammerjs": "^ 2.0.8",

Hoặc nếu bạn muốn một cách tự động thay thế chỉ cần bạn có thể nhập npm i hammerjs --save(hoặc npm i hammerjs@2.0.8 --savenếu bạn muốn, vì 2.0.8phiên bản mới nhất hiện nay là phiên bản mới nhất) trong thư mục dự án gốc của bạn và kiểm tra sau đó, nếu sự cố vẫn xảy ra, hãy thử xóa node_modulesthư mục và cài đặt lại trong thư mục gốc thư mục dự án cũng bằng cách chạy npm installmà sẽ kiểm tra dependencies( nơi hammerjscư trú ), devDependencies..., trong package.jsontệp và cài đặt chúng.

Cũng trong của bạn polyfills.ts(khuyến nghị có một cái nếu bạn chưa có)

nhập 'hammerjs / hammer';

Do đó, nó sẽ được tìm thấy trong khi ứng dụng góc cạnh của bạn được thực thi vì polyfills.tsbản thân nó được gọi bằng cách nhập (trong trường hợp bình thường, bạn có thể kiểm tra nó) trong main.tsđó là điểm vào của ứng dụng góc cạnh.

Cài đặt hammerjs

• với npm

  npm install --save hammerjs

• (hoặc) bằng sợi

  yarn add hammerjs

Sau đó nhập hammerjsvào điểm nhập của ứng dụng của bạn (ví dụ: src / main.ts).

import 'hammerjs';

Trong systemjs.config.jstệp của bạn, bạn cũng cần thêm mục nhập sau:

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

cùng với tất nhiên:

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

Điều khác còn thiếu trong mã của bạn (ít nhất là dựa trên những gì bạn có trong repo GH) là bao gồm CSS Material Design, hãy thêm nó vào index.htmltệp của bạn :

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

Tôi hi vọng cái này giúp được.

điều này đã hiệu quả với tôi (và điều này cũng với ionic4) Tôi có thể làm cho hammer.js hoạt động - và cũng có thể tạo ra ion với material.angular.io (ở dưới cùng)

Hammer + ion (búa + góc cạnh):

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

sau đó

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

sau đó

tsconfig.json - added types as seen below

"compilerOptions": {
...
...
"types": [
"hammerjs"
]
}

sau đó

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

sau đó

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

Mã mẫu từ trang web hammerjs hoạt động

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

Búa + vật liệu + ion: để làm cho búa vật liệu hoạt động với ion

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

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

và thì đấy, thanh trượt vật liệu của bạn hoạt động.

Mở dòng lệnh hoặc powershell, nhập thư mục của dự án angle2 của bạn:, cd your-project's-rootnhấn enter và dán:

npm install hammerjs --save

Npm sẽ tự động thêm tất cả các phụ thuộc vào package.jsontệp của bạn .

1. npm cài đặt hammerjs --save
2. npm install @ type / hammerjs --save-dev

3. thêm cái này vào stylescript.config trong tùy chọn trình biên dịch

   "loại": ["hammerjs"]

4. thêm cái này vào app.components.ts:

Cài đặt với

npm install --save hammerjs

hoặc là

yarn add hammerjs

Sau khi cài đặt, hãy nhập nó vào điểm nhập của ứng dụng của bạn (ví dụ: src / main.ts).

import 'hammerjs';

Hướng dẫn bắt đầu Angular Material