Angular - 'HammerJ를 찾을 수 없습니다.에스

Angular - 'HammerJ를 찾을 수 없습니다.에스

저는 간단한 각도 프로젝트를 진행하고 있습니다. 여기서 재료 설계를 프로젝트로 가져오려고 하지만 일부 구성 요소가 제대로 작동하지 않고 콘솔 경고가 표시됩니다.

HammerJS를 찾을 수 없습니다.특정 각도 재료 구성 요소가 올바르게 작동하지 않을 수 있습니다.

있습니다hammerjs 및 설됨및 또한치또@angular/material이 문제를 해결하려면 어떻게 해야 합니까?

사이드 노트

만약 당신이 가지고 있다면 주목할 가치가 있을 것입니다.hammerjs되었지만 구성 가 사용하고 할 수 .angular material HTML 요소가 아닌 구성 요소materialize-css 계급대신 를 사용하는 경우 프로젝트에 별도로 추가해야 합니다.

의 신의에서.package.json합니다.dependencies

"hammerjs": "^2.0.8",

또는 다른 자동 방법을 원한다면 입력할 수 있습니다.npm i hammerjs --save(또는)npm i hammerjs@2.0.8 --save당신이 원한다면, 이후로.2.0.8루트 프로젝트 폴더 및 테스트에 최신 버전이 있음). 문제가 계속 발생하면 삭제하십시오.node_modules를 실행하여 루트 프로젝트 폴더에 다시 설치합니다.npm install 그은확것다니입할인것을 입니다.dependencies(해당 위치),devDependenciespackage.json파일로 저장하고 설치합니다.

에도.polyfills.ts 있는 것을 (없면 다가추니것다천합을있는고지)▁(없

'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',

repo에 된 또되어 있다는 입니다. 을 코적드에 (어도에 GH repo있것함로으기반)에 추가하십시오. 이것을 당신의 코드에 추가하세요.index.html파일 이름:

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

이것이 도움이 되길 바랍니다.

이것은 나에게 효과가 있었습니다. (그리고 이것은 이온 4에서도 마찬가지입니다) 나는 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 },
]

그리고 voila, 당신의 재료 슬라이더는 작동합니다.

명령줄 또는 파워셸을 열고 angular2 프로젝트의 디렉토리를 입력합니다.cd your-project's-rootEnter 키를 누르고 붙여넣기:

npm install hammerjs --save

Npm은 자동으로 모든 종속성을 추가합니다.package.json파일.

설치 대상

npm install --save hammerjs

또는

yarn add hammerjs

설치 후 앱의 진입점(예: src/main.ts)으로 가져옵니다.

import 'hammerjs';

각도 재료 시작 가이드

1. npm 설치 hammerjs --저장
2. npm 설치 @types/hammerjs --save-dev

3. 컴파일러 옵션 아래 typescript.config에 추가합니다.

   "types": [ "hammerjs" ]

4. app.component.ts에 추가:

Angular 9부터 추가해야 합니다.HammerModule로.imports너의 배열AppModule아래의 예를 참조하십시오.

...

import {
  BrowserModule,
  TransferState,
  BrowserTransferStateModule,
  HammerModule, // <-- Hammer Module
} from '@angular/platform-browser';

...

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpClientModule,
    AppRoutingModule,
    HammerModule, // <-- Hammer Module
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

하는 것을 잊지 마세요.npm install또는yarn add당신의 프로젝트에 hammerjs를 추가하기 위해.보다 편리한 방법으로 @types/hammerjs를 설치하는 것이 좋습니다.

수입해머외JS는 별도로 다음 명령으로 각도 재료(버전 8) 라이브러리를 설치하면서 이 제스처 인식 기능을 yes에 제공할 수 있습니다.

npm add @angular/material

Set up HammerJS for gesture recognition?-Yes 

'hammerjs'를 main.ts 파일로 가져왔는지 확인합니다.

당신의 소포 안에.json 파일을 종속성에 추가합니다.

"hammerjs": "^2.0.8",

또는 다른 자동 방법을 원한다면 루트 프로젝트 폴더에 npm i hammerjs --save(또는 npm i hammerjs@2.0.8 --save(원하는 경우 npm i hammerjs@2.0.8 --save)를 입력하고 테스트를 수행하여 문제가 여전히 발생하면 node_modules 폴더를 삭제하고 루트 프로젝트 폴더에도 다시 설치합니다.패키지에서 종속성(hammerjs가 있는 곳), devDependencies...를 확인할 스톨.json 파일을 저장하고 설치합니다.

언급URL : https://stackoverflow.com/questions/41322566/angular-could-not-find-hammerjs