Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Hammer is not defined Angular Universal

jicee13 pro asked 6 years ago


I'm having trouble the Hammer error on my project so I went ahead and started a new example one from scratch and did my best to follow all the instructions is other forums.

I've narrowed down that the root of my problem it that in the `app.module.ts` it doesn't like when I add my own custom hammer config to the providers. If I simply don't include them it compiles fine server-side. Any help is appreciated.

Update: I figured it out. See comment below.


Damian Gemza staff answered 6 years ago


Dear jicee13,

Your problem could be resolved by following the below steps:

1. Execute npm install @types/hammerjs

2. Instead of declare var hammer in your app.module.ts file, import hammer

import { Hammer } from 'hammerjs/hammer';

3. In tsconfig.json, comment typeRoots key, and instead of it, add every types manually

"types": [
"hammerjs",
"jasmine",
"jasminewd2",
"node",
"q",
"selenium-webdriver"
],

After those steps, your project should run successfully.

I'll make you a pull request with those changes.

Best Regards,

Damian


jicee13 pro answered 6 years ago


Thanks for the advice Damian. So your solution almost worked. It indeed got rid of the Hammer is not defined warning, however when I attempted to load the page I got a new error saying DIRECTION_ALL is undefined or something like that. The reason this was happening is because it looks importing hammer the way you suggested (which seems like it would work) actually doesn't export a the Hammer variable correctly. I did however figure out a working solution by defining Hammer slightly differently here and by adjusting my hammer config slightly here.

I went ahead and pushed the changes to my repo . Thank you for helping!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No