Angular - 'Не удалось найти HammerJS'

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

Не удалось найти HammerJS. Некоторые компоненты Angular Material могут работать некорректно.

Я 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';

Таким образом, он будет найден во время выполнения вашего приложения angular, поскольку оно polyfills.tsвызывается импортом (в обычном случае, иначе вы можете проверить его), в main.tsкотором находится точка входа приложения angular.

Установить 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 install hammerjs --save
2. npm install @ types / hammerjs --save-dev

3. добавьте это в typescript.config в параметрах компилятора

   "типы": ["hammerjs"]

4. добавьте это в app.components.ts:

Установить с помощью

npm install --save hammerjs

или

yarn add hammerjs

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

import 'hammerjs';

Руководство по началу работы с Angular Material