Angular - 'Не вдалося знайти HammerJS'

Я працюю над простим кутовим проектом, де намагаюся імпортувати Material Design у свій проект, але деякі компоненти не працюють належним чином, і попередження консолі говорить:

Не вдалося знайти HammerJS. Деякі компоненти кутового матеріалу можуть працювати неправильно.

Я hammerjsвстановив, а також @angular/material. Як вирішити цю проблему?

Сіденоте

Можливо, варто зазначити, що якщо ви 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 / hammer';

Таким чином, його можна буде знайти під час виконання вашого кутового додатка, оскільки 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), це включення CSS Material Design, додайте це у свій index.htmlфайл:

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

Я сподіваюся, що це допомагає.

це працювало у мене (і це також з ionic4), я міг би зробити роботу hammer.js - а також ionic з material.angular.io (внизу)

Молоток + іонний (молоток + також кутовий):

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

Молоток + іонний + матеріал: щоб молоток з матеріалу працював з іонним

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

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

і вуаля, ваш повзунок матеріалу працює.

Відкрийте свій командний рядок або PowerShell, введіть каталог вашого проекту angular2:, cd your-project's-rootнатисніть Enter і вставте:

npm install hammerjs --save

Npm автоматично додасть усі залежності до вашого package.jsonфайлу.

1. npm встановити hammerjs --save
2. npm install @ types / hammerjs --save-dev

3. додати це до typecript.config під параметрами компілятора

   "types": ["hammerjs"]

4. додати це до app.components.ts:

Встановити за допомогою

npm install --save hammerjs

або

yarn add hammerjs

Після встановлення імпортуйте його до точки входу вашого додатка (наприклад, src / main.ts).

import 'hammerjs';

Посібник із початку роботи з кутовим матеріалом