Protractor not waiting for angular2 to load

Question

Protractor version: 5.1.2
Node version: 6.9.0
Angular version: 2.4.10

OnPrepare function i am doing browser.get('/'). After this i am doing a login in a it.
First issue is it throws error as async function was not called. After doing a failed research i added browser.sleep(500) then the above stopped to come and executed the login it case.

After that i have to click a button on landing page and then navigate to another page and click another button.Here also it fails saying that no element found for the locator.But if i add browser.waitForAngular() or browser.sleep(), then it starts to work.I can not add this explicitly everytime. Moreover when i worked with protractor(version: 1.3), it never used to happen.

So the problem I think is protractor is not waiting for the angular to synchronize.
Any solution is appreciated.

Protractor config file

exports.config = {
directConnect: true,
useAllAngular2AppRoots: true,
specs: ['./**/*.spec.js'],
baseUrl: 'http://10.209.1.38:9090',
framework: 'jasmine2',
capabilites: {
    'browserName': 'chrome'
},
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 60000
},
onPrepare: function () {
    browser.driver.manage().window().maximize();
    browser.get('/');
    browser.sleep(500);
 }
};

Answer 1

Try below code inside conf.js file and exports.config tag:-

browser.ignoreSynchronization = true;

And inside the login "it" use below code:-

browser.waitForAngularEnabled(false);

And inside the other landing page use this code:-

browser.waitForAngularEnabled(true);

Answer 2

Protractor doesn't necessarily wait for onPrepare to be completely finished, before executing the test.

However, you can optionally return a promise within onPrepare, which then Protractor will await before continuing execution.

See details in this question here or the corresponding Protractor documentation here.

For my case I added the Login-Steps (fill username and password, click Login) to the onPrepare-function, which also creates promises and therefore triggers Protractor test execution to wait until onPrepare-Promises are resolved.

onPrepare: function () {
    var login_page = require('../page/login_page.js');
    browser.driver.manage().window().maximize();
    browser.get('/');
    login_page.enterUserName('user');
    login_page.enterPassword('password');
    login_page.clickLogin();
}