Не удалось найти HammerJS в angular 6
В своем проекте я использую angular-material. Я получаю следующие предупреждения:
Could not find HammerJS. Certain Angular Material components may not work correctly.
The "longpress" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
Я знаю, что это дубликат этого вопрос
В ответ они отметили, что:
- Мы должны добавить
"^2.0.8",кdependenciesв файле package.json. - импортировать
'hammerjs/hammer';в файл polyfills.ts.
В моем случае все в порядке, но я получаю такое же предупреждение в консоль браузера.
На самом деле я пытался дать ссылку на stackblitz. Когда я пробовал использовать stackblitz, он не показывает это предупреждение.
Добавить сюда в комментариях?
У меня много компонентов, я не могу найти, для какого компонента отображается это предупреждение.
Должен ли я опубликовать файл package.json?
Выполните npm prune и npm i
Добавьте hammerjs из node_modules в angular.json, а затем перезапустите проект.
Ответы 5
Есть 2 способа решить эту проблему:
Либо включите импорт (главный) в файл основного модуля, либо
polyfills.ts:import 'hammerjs';Или включите скрипт из CDN в ваш файл
index.html:<head> <!-- ... --> <script src = "https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> <!-- ... --> </head>
import 'hammerjs'; решил мою ошибку, большое спасибо за это. На самом деле ранее я импортировал (hammerjs) в основной файл модулей, например import {} from 'hammerjs';. Это неправильно ??
@PrashanthGH Нет. Просто импортируйте сам модуль. Этот синтаксис не будет ничего импортировать для использования в проекте. Однако при импорте модуля (возможно) импортируются все модули.
с angular6 вы можете включить путь hammerjs в node_modules в файле angular.json.
Угловой документ говорит, что цель файла angular.json -
CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor. For details, see Angular Workspace Configuration.
Вы можете включить путь к модулю узла hammerjs в список скриптов. см. ниже пример:
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.json"
],
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
]
},
"configurations": {
....
Обратите внимание, что вам нужно перезапустить ng serve, чтобы он вступил в силу.
Это сработало, обратите внимание, что необходимо остановить и перезапустить проект, чтобы этот файл был поднят.
Установить с помощью
npm install --save hammerjs
или
yarn add hammerjs
После установки импортируйте его в точку входа вашего приложения (например, src / main.ts).
import 'hammerjs';
Добавление Hammer js на глобальном уровне проекта
"scripts": [
"node_modules/hammerjs/hammer.min.js" <- add path to hammerjs
]
Дополнение на уровне модуля
import * as Hammer from 'hammerjs';
Для новых версий Angular Material при установке Material вам просто нужно запустить
ng add @angular/material
Он спросит у вас что-то вроде этого
Set up HammerJS for gesture recognition?
Вы должны ответить «Y», и он автоматически настроит для вас HammerJS.
Руководство по установке углового материала: https://material.angular.io/guide/getting-started#install-angular-material
Не могли бы вы добавить демонстрацию / код для воспроизведения проблемы?