Cannot Locate Element using Jasmine (Protractor)

The login page is a non-angular page and when the user login, then s/he is redirected to home page. The home page is using angular.

For login, I've used

        browser.ignoreSynchronization = true;
        var loginTxt = browser.driver.findElement(by.id("userNameInput"));
        var pwdTxt = browser.driver.findElement(by.id("passwordInput"));
        var signInBtn = browser.driver.findElement(by.id("submitButton"));
        loginTxt.sendKeys("test1");
        pwdTxt.sendKeys("password!");
        signInBtn.click();

User is logged in successfully, I've used the following code to interact with an element in the home page.

        browser.ignoreSynchronization = false;
        var el = element(by.className("btn item-desktop-only inactive-btn"))
        el.click();

Error Code: Message: Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"

When I remove

browser.ignoreSynchronization = false;

then I get an error as:

Message:
    Failed: No element found using locator: By(css selector, .btn.item-desktop-only.inactive-btn)
  Stack:
    NoSuchElementError: No element found using locator: By(css selector, .btn.item-desktop-only.inactive-btn)

HTML IS:

<button _ngcontent-vsd-c3="" class="btn item-desktop-only inactive-btn" type="button" ng-reflect-klass="btn item-desktop-only" ng-reflect-ng-class="[object Object]"><img _ngcontent-vsd-c3="" class="orders-icon" src="/assets/icons/orders-inactive.png" srcset="/assets/icons/orders-inactive@2x.png 2x,/assets/icons/orders-inactive@3x.png 3x"> Orders </button>

Solution

From the error it is clear the home page is not angular app > version 2.

Proceed with

browser.ignoreSynchronization = true;

Can you check if the locator is correct. Please validate the locator by finding it in dev tools.

Personnel experience: angular app version < 2 works fine having browser.ignoreSynchronization = true;

Try to wait until locator is existing.

you can use ExpectedConditions in protractor.

const EC = require('protractor').ExpectedConditions;
let elm = element(by.id('your id'));  
browser.wait(EC.presenceOf(e), 10000); //2nd parameter is the max timeout
expect(e.isPresent()).toBeTruthy();