Clicking buttons after a modal event with protractor

Question

I'm having a problem clicking on a button that is on a modal or on a page after a modal is supposed to have been closed. Here is my experience:

I have a modal i'm dealing with. I create the actions to have it displayed. I have a wait function that waits for one of the modal's items to be "clickable" (This allows it to be both present and displayed). I then verify the text on the modal.

All of the above is successful. However, when I try to click on the button to close it, I'm getting an error stating that another element on the page would be clickable. I'm thinking I need to disable angular (and CSS?) animation. Is this answer still relevant to the latest version of protractor? How to disable animations in protractor for angular js application The problem I have with the above answer is that typescript didn't recognize the "angular" object.

I also see this question: Click on a button in a Modal Window - Protractor But the "answer" is to sleep for 2 seconds. Not my desired solution (if at all possible).

In any case, I found a way to reproduce what I'm talking about. The following spec will load the angular materials page to the dialog demo page. It will click on the Confirm Dialog button, verify the header text on the modal, click the close button, then try to repeat the steps a second time. It fails on the second time, even though it is supposed to have waited until the button is clickable.

/**
 * modal.conf.js
 */
exports.config = {
  framework: 'jasmine',
  specs: ['modal.spec.js'],
  useAllAngular2AppRoots: false,
  jasmineNodeOpts: {
    'stopSpecOnExpectationFailure': true,
    showColors: true
  }
};

---

'use strict';
/**
 * modal.spec.js
 */

var headerText = "Would you like to delete your debt?";

describe('Click Modal and Close test', function () {
    beforeAll(function () {
        browser.get('https://material.angularjs.org/latest/demo/dialog')
    });

    it('should click to open modal', function () {
        confirmBtn.click().then(function () {
            WaitForLoad(cancelBtn).then(function () {
                expect(headerTextEl).toEqual(headerTextEl);
            });
        });
    });

    it('should click to close modal', function () {
        cancelBtn.click().then(function () {
            WaitForLoad(confirmBtn);
        });
    });

    it('should click to open modal', function () {
        confirmBtn.click().then(function () {
            WaitForLoad(cancelBtn).then(function () {
                expect(headerTextEl).toEqual(headerTextEl);
            });
        });
    });

    it('should click to close modal', function () {
        cancelBtn.click().then(function () {
            WaitForLoad(confirmBtn);
        });
    });

});

// region Page Objects
var confirmBtn = $('.layout-margin > button:nth-child(2)');
var headerTextEl = $('.md-title');
var cancelBtn = $('button.md-cancel-button');
// endregion

// region actions
var WaitForLoad = function (el, timeout) {
    var EC = protractor.ExpectedConditions;
    return browser.wait(EC.elementToBeClickable(el), timeout);
};
// endregion