dialog: memory leak when injecting $mdDialog

[kimtuck]

Bug:

https://codepen.io/kimtuck/pen/yRRbjb

Detailed Reproduction Steps:

1. Run the contents of the pen using karma. Monitor the memory usage of chrome while the tests are running. You will see the memory creep up dramatically, until around 2.1GB chrome crashes.

What is the expected behavior?

Memory remains more or less constant, because all we're doing here is injecting $mdDialog, which is a service (a singleton).

What is the current behavior?

Memory is dramatically consumed

What is the use-case or motivation for changing an existing behavior?

Memory leak will lead to application crashes or poor performance. In a set of unit tests that inject $mdDialog in many places (as our application does) chrome crashes during the unit test run, leading to a failed unit test.

Which versions of AngularJS, Material, OS, and browsers are affected?

See the package.json in the codepen. Relevant lines from package.json:
"angular": "^1.7.2",
"angular-animate": "^1.7.2",
"angular-aria": "^1.7.2",
"angular-messages": "^1.7.2",
"angular-material": "^1.1.10",

• OS: windows 10
• Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

This is the (partial) code for MdDialogProvider. If you remove the .setDefaults() and the .addPresets() then there is no memory leak. If you include the .setDefaults() and remove the .addPresets() then the memory leak occurs.

So, the memory leak is in the .setDefaults() call.

Note that on each test invocation, the MdDialogProvider method executes; and thus the setDefaults() method runs on each test invocation.

function MdDialogProvider($$interimElementProvider) {
  // Elements to capture and redirect focus when the user presses tab at the dialog boundary.
  MdDialogController['$inject'] = ["$mdDialog", "$mdConstant"];
  dialogDefaultOptions['$inject'] = ["$mdDialog", "$mdAria", "$mdUtil", "$mdConstant", "$animate", "$document", "$window", "$rootElement", "$log", "$injector", "$mdTheming", "$interpolate", "$mdInteraction"];
  var topFocusTrap, bottomFocusTrap;

  return $$interimElementProvider('$mdDialog')
    .setDefaults({
      methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose',
          'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen', 'multiple'],
      options: dialogDefaultOptions
    })
    .addPreset('alert', {
      methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'theme',
          'css'],
      options: advancedDialogOptions
    })
    .addPreset('confirm', {
      methods: ['title', 'htmlContent', 'textContent', 'content', 'ariaLabel', 'ok', 'cancel',
          'theme', 'css'],
      options: advancedDialogOptions
    })
    .addPreset('prompt', {
      methods: ['title', 'htmlContent', 'textContent', 'initialValue', 'content', 'placeholder', 'ariaLabel',
          'ok', 'cancel', 'theme', 'css', 'required'],
      options: advancedDialogOptions
    });

[Splaktar]

This looks like a duplicate of #11207, but the information on debugging is much appreciated!

[kimtuck]

It's not a duplicate. #11207 involves actually creating, opening, and closing a dialog; this issues involves a case where no dialog is opened; simply injecting the $mdDialog service several times is enough to cause a leak.

[Splaktar]

I only said that it "looks like a duplicate". I didn't say that it was a duplicate and I didn't close it as a duplicate. But thank you for your clarification.

#11024 (comment) also reports a memory leak where md-button is used and $mdDialog is injected but never used. I'll do some re-testing of things after we get one of these fixed to see how it affects the others.

[kimtuck]

I figured out what the root cause of this issue is, and a workaround. The root cause is that the $mdInteraction service registers some listeners on the DOM. In a unit test environment, these are never cleaned up. For example, injecting $mdDialog injects the $mdInteraction service each time; and when $mdInteraction is instantiated for the first time (as it is on any unit test that causes it to be injected) the listeners are registered.

So if you have enough tests that inject $mdDialog, you get enough listeners registered that Chrome's memory grows too large, and chrome crashes.

To avoid this, you can replace the $mdInteraction service with a stub. I've done this, and my memory issues have been fixed.

// The $mdInteraction service causes a memory leak because it registers dom event listeners and does not
// clean them up.  In a unit test environment where the service is re-initialized frequently, these
// event handlers build up and consume memory.
//
// Since, in a unit test environment, there is never any user interaction with the dom anyway,
// it's safe to replace $mdInteraction service with a different service that does not
(function() {
  'use strict';

  angular.module('material.core.interaction').service('$mdInteraction', function() {
  });
})();

In your karma.conf.js, you have an array of files to be included for your tests. Put the above code in a file, and include it after you include angular-material.