Angular SSR 시 hammer.js 오류

회사에서 사용하는 컴포넌트 라이브러리인 Kendo UI for Angular 사용할 때 SSR 시 hammer.js 오류가 나는 현상이 있었다.

 

https://www.telerik.com/kendo-angular-ui/components/charts/get-started/

Charts Library Getting Started | Kendo UI for Angular

 

 

서버 측에서 window is now defined. 라는 오류가 나고 있었다.

 

 

구글링해보니 바로 hammer.js 에서 발생하는 오류인 걸 알았고

Kendo UI 라이브러리 추가하면서 받았던 hammer.js 를 app.module.ts에서 import해주는 부분에서 무언가의 처리를 해줘야 하는 것 같았다.

아래 첨부한 참고사이트의 도움을 받았다.

@angular/platform-browser 모듈에 HammerModule 라는 모듈이 있어서 ngModule에 import 해 줬다.

Angular가 업데이트 되면서 hammer.js에서 작동하지 않는 것들 때문에 지원을 하는 것 같다.

 

그리고 app.module.ts에 

 

import hammer.js

 

이 부분은 지워주고 angular.js 에 아래와 같이 scripts 부분에 추가해 줬다.

 

"architect": {
        "build": {
          ...
            "scripts": [
              "node_modules/hammerjs/hammer.min.js" <- 추가
            ]
          },
          ...

 

그리고나서 실행 해보니 제대로 작동한다!!

 

 

참고사이트

https://levelup.gitconnected.com/making-hammerjs-work-with-angular-9-81d289159320

Making HammerJS work with Angular 9

https://stackoverflow.com/questions/52584700/could-not-find-hammerjs-in-angular-6

Could not find HammerJS in angular 6