Protractor- Waits on angular 10 app always fail

Thanks for taking my question.

We've been using protractor for a number of years with great success. All of our newer apps have been built in angular 10 or upgraded to angular 10. we rely pretty heavily on our explicit waits. This hasn't given us issues for a long time. However, since the upgrade when we waitForDisplayed or waitForClickable it will always time out when WaitForAngularEnabled = true.

On the flipside if WaitForAngularEnabled = false and we use seleniums browser.expectedConditions it works fine. Has anyone seen any issues with Angular 10 and protractor?

• Node ver: 8.17.0
• Typescript ver: "^3.9.5"
• Protractor ver: 7.0.0
• Angular ver: 10.0.0

Here is our generic wait method

import { browser, ElementFinder, ExpectedConditions as EC } from 'protractor';

/** Wait for this Component to be clickable.
 * @param {number} [waitTimeoutMilliseconds] If set, override protractor defaults for maximum time to wait.
 * @returns {Promise<void>} A promise that resolves when the element is clickable.
 * @memberof Component
 */
public async WaitForClickable(timeoutMilliseconds?: number): Promise<void> {
    try {
        if(browser.waitForAngularEnabled()){
            await browser.wait(EC.elementToBeClickable(this.ComponentElement), timeoutMilliseconds);
        }
        else{
            let bEC = browser.ExpectedConditions;

            return browser.wait(bEC.elementToBeClickable(this.ComponentElement), timeoutMilliseconds, "First Name text field should be visible.");
        }
        
    }
    catch (e) {
        throw new Error(`Component` + (this.DisplayName ? ` (${this.DisplayName}) - ` : ' - ') + `WaitForClickable:\n${e}`);
    }
}


    /** Waits for this Component's element to be both present on the DOM and visible.
     * @param {number} [waitTimeoutMilliseconds]  If set, override protractor defaults for how long to wait.
     * @returns {Promise<void>} A promise that resolves when the element is present and visible.
     * @memberof Component
     */
    public async WaitForDisplayed(waitTimeoutMilliseconds?: number): Promise<void> {
        try {
            if(browser.waitForAngularEnabled()){
                await browser.wait(EC.and(EC.presenceOf(this.ComponentElement), EC.visibilityOf(this.ComponentElement)), waitTimeoutMilliseconds);
            }
            else{
                let bEC = browser.ExpectedConditions;

                return browser.wait(bEC.visibilityOf(this.ComponentElement), waitTimeoutMilliseconds, "First Name text field should be visible.");
            }
        }
        catch (e) {
            throw new Error(`Component` + (this.DisplayName ? ` (${this.DisplayName}) - ` : ' - ') + `WaitForDisplayed:\n${e}`);
        }
    }

Please note that we had to add the if(browser.waitForAngularEnabled()) because we would always timeout on the wait and we still wanted to use the generic method. I assumed it was because the angular zone never stabilizes but I can't find any indication of that.

Any help would be appreciated