4

I'm working on an Angular application with Material design. Recently I found a memory leak in one of my pages. Every time this page is loaded it takes more and more time to initialize/render.

This page contains a Material table mat-table (15 columns x 100 rows) with a Material Tooltip mat-tooltip on each cell. After some research, I understand that the memory leak is due to the Tooltip (and not the table).

A post on Github suggested removing HammerJS as a fix, see: https://github.com/angular/material2/issues/4499.

Now that the memory isn't leaking anymore I'm still getting these 2 warnings:

Could not find HammerJS. Certain Angular Material components may not work correctly.

Hammer.js is not loaded, can not bind 'longpress' event.

So how to tell Angular-Material I'm not interested in touch-gestures, therefore I'm not interested in HammerJS?

Frameworks versions:

  • Angular/ Angular CLI v6.0.1
  • Angular-Material v6.4.0
  • Node v8.11.1
  • TypeScript v2.7.2
  • HammerJS - 2.0.8 (before removal)
Community
  • 1
  • 1
Gil Epshtain
  • 8,670
  • 7
  • 63
  • 89

1 Answers1

6

I know this is an old question but to anyone coming here for an answer, I found a solution to this on this GitHub link

I added this to my app.module.ts

import { HAMMER_LOADER } from '@angular/platform-browser';

providers: [{
  provide: HAMMER_LOADER,
  useValue: () => new Promise(() => {})
}]

As for the unit tests, I added individually to each test class.

EDIT (Recommended)

This is the better solution to the answer

Install the hammerjs module with

npm install hammerjs --save

Then add the following line to your polyfills.ts

import 'hammerjs/hammer';
BStill
  • 894
  • 1
  • 9
  • 33