Running into Error while waiting for Protractor to sync with the page with basic protractor test

describe('my homepage', function() {
    var ptor = protractor.getInstance();
    beforeEach(function(){
        // ptor.ignoreSynchronization = true;
        ptor.get('http://localhost/myApp/home.html');
        // ptor.sleep(5000);
    })
    describe('login', function(){

        var email = element.all(protractor.By.id('email'))
            , pass = ptor.findElement(protractor.By.id('password'))
            , loginBtn = ptor.findElement(protractor.By.css('#login button'))
            ;

        it('should input and login', function(){
            // email.then(function(obj){
            //  console.log('email', obj)
            // })
            email.sendKeys('josephine@hotmail.com');
            pass.sendKeys('shakalakabam');
            loginBtn.click();

        })
    })

});

the above code returns

 Error: Error while waiting for Protractor to sync with the page: {}

and I have no idea why this is, ptor load the page correctly, it seem to be the selection of the elements that fails.

TO SSHMSH:

Thanks, your almost right, and gave me the right philosophy, so the key is to ptor.sleep(3000) to have each page wait til ptor is in sync with the project.

I got the same error message (Angular 1.2.13). My tests were kicked off too early and Protractor didn't seem to wait for Angular to load.

It appeared that I had misconfigured the protractor config file. When the ng-app directive is not defined on the BODY-element, but on a descendant, you have to adjust the rootElement property in your protractor config file to the selector that defines your angular root element, for example:

// protractor-conf.js
rootElement: '.my-app',

when your HTML is:

<div ng-app="myApp" class="my-app">