Why do I need to use waitForAngular(false) & browser.sleep(3000)?

We have a website that is built 100% from Angular and I was asked to use Protractor to write rend to end testing. Now the problem that I had encountering is that if I do not use waitForAngular(false) and browser.sleep(3000) my test will fail even I used the ExpectedCondition.

So here is my Scenario:

In the login page, I can find all the element, send-keys to the input box and login. But after login, it fails. It cannot find any element, click any element at all.

My Code looks like this.

describe("/profile", () => {
  let page: Profile;

  beforeAll(async () => {
    page = await login(Profile, user, login);
    await browser.wait(ExpectedConditions.presenceOf(page.element));
    await navigate(path.profile)
  })

  afterAll(async () => {
    logout();
  })

  it("should have navigate to the page", async () => {
    expect(await browser.getCurrentUrl()).toContain("/profile");
  });

  it("should have correct page markup", async () => { 
// this test fails without waitForAngular(false)
// or browser.sleep(3000) in the navigation or OnPrepare in the config
    expect(await page.headerTitle.isDisplayed()).toBe(true);
    expect(await page.headerTitle.getText()).toContain("Profile")
  })
})