Protractor - Where to use browser.waitForAngular()

Question

I have some tests written using protractor for angular.js app. I am using Page Objects design pattern and there i have some methods that navigate to other pages by clicking on links and buttons. and soon after that i am calling browser.waitForAngular().

Page Object

module.exports = function () {
    this.companyNameLink = element(by.id('viewCompany'));
    this.newMeetingButton = element(by.id('newMeetingButton'));

    this.createNewGeneralMeeting = function () {
        this.newMeetingButton.click();
        browser.waitForAngular();
    };

    this.goToCompanyPage = function () {
        this.companyNameLink.click();
        browser.waitForAngular();
    };
};

And in some spec file i use this page object like this..

var DashboardPage = require('../dashboardPageObject.js');
dashboardPage = new DashboardPage();

...

dashboardPage.goToCompanyPage();

But the problem is sometimes i get the angular could not be found on the window error and my tests fail. Most of the time the tests run. This issue is random. My question is that should i remove the browser.waitForAngular() from the page object method and call it after i make the method call like this...

Modified Page Object

...
this.goToCompanyPage = function () {
    this.companyNameLink.click();
};
...

Spec File

dashboardPage.goToCompanyPage();
browser.waitForAngular();

Is calling browser.waitForAngular() causing the issue? Where should i call waitForAngular is there any best practice on how to use this?

Answer 1

From protractor's documentation:

Instruct webdriver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Note that Protractor automatically applies this command before every WebDriver action.

You shouldn't be calling this at all and I cannot think of a valid case where you should.