Angular- 'HammerJS를 찾을 수 없습니다'

머티리얼 디자인을 내 프로젝트로 가져 오려고하지만 일부 구성 요소가 제대로 작동하지 않고 콘솔 경고가 표시되는 간단한 각도 프로젝트에서 작업 중입니다.

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_modulesnpm installdependencieshammerjsdevDependenciespackage.json

또한 귀하의 polyfills.ts(없는 경우 하나를 갖는 것이 좋습니다)

import 'hammerjs / hammer';

따라서 앵귤러 앱이 실행되는 동안 앵귤러 앱의 진입 점 인 polyfills.ts가져 오기 (일반적인 경우에는 확인할 수 있음) 에 의해 자체적으로 호출 되기 때문에 발견 main.ts됩니다.

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가 포함되어 있다는 것입니다. 다음을 index.html파일에 추가하세요 .

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

이게 도움이 되길 바란다.

이것은 나를 위해 일했습니다 (그리고 이것은 ionic4에서도 마찬가지입니다) hammer.js를 작동시킬 수 있습니다.

해머 + 이온 (해머 + 앵귤러도) :

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.");
});

Hammer + ionic + material : 재료 망치가 이온과 함께 작동하도록

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 설치 @ 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 시작 안내서