web-dev-qa-db-ja.com

angular 6にHammerJSが見つかりませんでした

私はプロジェクトで角材を使用しています。私はこの警告を受けています：

HammerJSが見つかりませんでした。特定のAngularマテリアルコンポーネントが正しく機能しない場合があります。

Hammer.JSがロードされておらず、カスタムローダーが指定されていないため、「longpress」イベントをバインドできません。

私はこれがこれの複製であることを知っています 質問

回答の中で、彼らは次のように言及しています。

  1. "^2.0.8",をpackage.jsonファイルのdependenciesに追加する必要があります。
  2. インポート'hammerjs/hammer'; inpolyfills.tsファイル。

私の場合、すべてが正常ですが、ブラウザコンソールで同じ警告が表示されます。

angularangular-materialhammer.js
37
PGH

この問題を解決するには2つの方法があります。

  1. メインモジュールのファイルに（main）インポートを含めるか、polyfills.ts：

    import 'hammerjs';

  2. または、CDNのスクリプトをindex.htmlファイルに含めます。

    <head>
  <!-- ... -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <!-- ... -->
</head>
59
Edric

angular6では、angle.jsonファイルのnode_modulesにhammerjsパスを含めることができます。

Angular doc は、angular.jsonファイルの目的が

TSLint、Karma、Protractorなど、CLIが使用するビルド、サービス、およびテストツールの構成オプションを含む、ワークスペース内のすべてのプロジェクトのCLI構成のデフォルト。詳細については、Angularワークスペースの構成を参照してください。

スクリプトリストに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を有効にするには再起動する必要があることに注意してください。

11
Jun711

でインストール

npm install --save hammerjs

または

yarn add hammerjs

インストール後、アプリのエントリポイント（src/main.tsなど）にインポートします。

import 'hammerjs';

Angular Material Getting Started Guide

7
NicuVlad