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

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

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

У меня установлен hammerjs, а также @angular/material. Как решить эту проблему?

Мой проект можно найти в этом github repo



Sidenote

Возможно, стоит отметить, что если у вас установлено hammerjs, а ваши компоненты по-прежнему не отображаются правильно, убедитесь, что вы используете angular material 2 компоненты, а не элементы html с materialize-css < сильные > классы. Если вы используете materialize-css вместо angular material 2, вам нужно будет добавить его в свой проект отдельно.

Ответы

Ответ 1

В вашем файле package.json добавьте это в dependencies

"hammerjs": "^ 2.0.8",

Или, если вы хотите использовать альтернативный автоматический способ, просто введите npm я hammerjs --save (или npm я [email protected] --save если хотите, поскольку 2.0.8 является последней версией в настоящее время) в корневой папке проекта и Затем проверьте, если проблема все еще возникает, попробуйте удалить папку node_modules и переустановить ее в корневой папке проекта, также выполнив npm install которая проверит dependencies (где находится hammerjs), devDependencies..., в файле package.json и установите их.

Также в вашем polyfills.ts (рекомендуется иметь один, если у вас его нет)

импорт 'hammerjs/hammer';

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

Ответ 2

Установить hammerjs

  • с нпм

    npm install --save hammerjs

  • (или) с помощью пряжи

    yarn add hammerjs

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

import 'hammerjs';



Ответ 3

В вашем файле 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">

Надеюсь, это поможет.

Ответ 4

это сработало для меня (и это также относится к ionic4), я мог бы заставить работу hammer.js - и также ионное с 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 },
]

и вуаля, ваш слайдер материала работает.

Ответ 5

Откройте свою командную строку или PowerShell, введите каталог проекта angular2: cd your-project's-root, нажмите и вставьте:

npm install hammerjs --save

Npm автоматически добавит все зависимости в ваш файл package.json.

Ответ 6

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

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

    "types": ["hammerjs"]

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

hammerjs