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:
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';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With