Material: (intermediate value)(intermediate value)(intermediate value).then is not a function

[johannesjo]

Actual Behavior:

• When I open multiple toast notifications in short succession the following error shows up in the console:

VM56055:20 TypeError: (intermediate value)(intermediate value)(intermediate value).then is not a function
    at Object.onRemove (angular-material.js:20861)
    at angular-material.js:3524
    at $Q (angular.js:16945)
    at hideElement (angular-material.js:3521)
    at Object.transitionOutAndRemove [as remove] (angular-material.js:3334)
    at Object.destroy (angular-material.js:3268)
    at Object.destroyInterimElement [as destroy] (angular-material.js:3089)
    at angular-material.js:20427
    at Scope.$broadcast (angular.js:18298)
    at Scope.$destroy (angular.js:17913)
window.console.error @ VM56055:20
window.console.error @ VM56118:27
(anonymous) @ angular.js:14328
(anonymous) @ angular.js:10837
processChecks @ angular.js:16674
completeOutstandingRequest @ angular.js:6111
(anonymous) @ angular.js:6390

CodePen (or steps to reproduce the issue): *

• http://codepen.io/johannesjo/pen/zNroWE?editors=1010

Angular Versions: *

• Angular Version: 1.6.1
• Angular Material Version: 1.1.1

Additional Information:
Shows up for the latest browser versions of chrome (Version 55.0.2883.87 (64-bit)) and firefox. OS probably doesn't matter, but is Ubuntu 16.10.

---

Does not seem to happen for angular 1.5.5.

[AesSedai]

@johannesjo Ahh, thanks for finding this! I've been experiencing the same issue, but didn't do much detective work tracking it down since it wasn't causing mission-critical issues at the time.

[manish2535]

I have the same issue too.

[danielok1993]

I have the same issue, any workarounds ? I have tried to hide before showing, but it does not help.

[dingguijin]

Meet same problem.

[soufi]

+1

[BrianCerasuolo]

+1

[droiddavid]

Has anyone ever found a solution to this issue?

[born2net]

same issue here...

[sherifalfy]

Same issue here with angular: 1.6.6 , material: 1.1.0

Anyone found a solution ?

[SenninSensei]

same here

[Splaktar]

I was able to reproduce this issue with the provided CodePen.

I've updated the CodePen for Angular 1.6.6 and AngularJS Material 1.1.5. The situation seems to have improved significantly. The output is now the following:

Possibly unhandled rejection: {
  "options":{
    "preserveScope":false,"scope":"$SCOPE","toastClass":"","position":"bottom",
    "themable":true,"hideDelay":3000,"autoWrap":true,
    "template":"<md-toast md-theme=\"{{ toast.theme }}\" ng-class=\"{'md-capsule': toast.capsule}\">  <div class=\"md-toast-content\">    <span class=\"md-toast-text\" role=\"alert\" aria-relevant=\"all\" aria-atomic=\"true\">      {{ toast.content }}    </span>    <md-button class=\"md-action\" ng-if=\"toast.action\" ng-click=\"toast.resolve()\"         ng-class=\"highlightClasses\">      {{ toast.action }}    </md-button>  </div></md-toast>",
    "theme":"default","controllerAs":"toast","bindToController":true,"$type":"simple",
    "textContent":"dasdsa ","action":"UNDO","element":{"0":{},"length":1},
    "parent":{"0":{"ng339":3},"length":1},"openClass":"md-toast-open-bottom"},
    "deferred":{"promise":{}}
}

So since this indicates that the promise rejection isn't being handled, I added the following code:

    .catch(function () {
      console.error('Toast Handler called.');
    });

This resolves any exceptions and the only output is what you would expect from my console.error() call. This appears to be working as intended in AngularJS Material 1.1.5 and AngularJS >= 1.6.1.

[faelplg]

@Splaktar your solution works and make a lot of sense. Thanks.
Ex.:

$mdToast.show({
    hideDelay: 3000,
    position: 'top right',
    template:
        '<md-toast class="toastr-success">' +
            '<div class="md-toast-content">' +
              'Success' +
            '</div>' +
          '</md-toast>'
}).catch(() => {
    return;
});