Angular 2 - '找不到HammerJS'

Question

我正在開發一個簡單的angular2項目，我正在嘗試將Material Design導入到我的項目中，但是有些組件工作不正常，並且控制台警告說：

找不到HammerJS。 某些Angular Material組件可能無法正常工作。

我安裝了hammerjs ，還有@angular/material 。 我該如何解決這個問題？

我的項目可以在這個github回購中找到

邊注

值得注意的是，如果你安裝了hammerjs並且你的組件仍然無法正確渲染，以確保你使用的是angular material 2 組件，而不是使用帶有materialize-css 類的 html元素。 如果您使用的 materialize-css ，而不是angular material 2 ， 你需要將它單獨添加到您的項目。

Answer 1

在package.json文件中，將其添加到dependencies

“hammerjs”：“^ 2.0.8”，

或者，如果你想要一種替代的自動方式，你可以在根項目文件夾中輸入npm i hammerjs --save （或npm i hammerjs@2.0.8 --save如果你願意，保存，因為2.0.8是最新版本的日期） 。測試然后，如果問題仍然發生嘗試刪除node_modules文件夾並在root項目文件夾中重新安裝它也通過運行npm install來檢查dependencies （ 其中hammerjs所在的位置 ）， devDependencies ...，在package.json文件中並安裝他們。

也可以在你的polyfills.ts （如果你沒有，建議有一個）

進口'hammerjs / hammer';

因此，可以在執行角度應用程序時找到它，因為polyfills.ts本身是通過import （在正常情況下，你可以檢查它）在main.ts中main.ts ，這是角度應用程序的入口點。

Answer 2

隨着最新的Angular版本，

安裝hammerjs

• 與npm

   npm install --save hammerjs 

• （或）用紗線

   yarn add hammerjs 

然后在應用程序的入口點導入hammerjs （例如src / main.ts）。

import 'hammerjs';

---

原始答案（Angular 5下面的版本）

通過npm安裝hammerjs

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

在你的src/app/app.module.ts導入hammerjs，

import 'hammerjs';

然后將hammerjs添加到tsconfig.json文件中的類型。

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

來源： Angular Material 2入門

Answer 3

在systemjs.config.js文件中，您還需要添加以下條目：

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

當然還有：

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

您的代碼中缺少的另一件事（至少基於您在GH repo中的內容）是包含Material Design CSS，將其添加到您的index.html文件中：

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

我希望這有幫助。

Answer 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 },
]

瞧，您的材質滑塊有效。

Answer 5

打開命令行或powershell，鍵入angular2項目的目錄： cd your-project's-root project's cd your-project's-root ，點擊輸入並粘貼：

npm install hammerjs --save

Npm會自動將所有依賴項添加到package.json文件中。

Answer 6

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

3. 將此添加到編譯器選項下的typescript.config

   “類型”：[“hammerjs”]

4. 將此添加到app.components.ts：

Answer 7

安裝時

npm install --save hammerjs

要么

yarn add hammerjs

安裝完成后，將其導入應用程序的入口點（例如src / main.ts）。

import 'hammerjs';

角度材料入門指南