Protractor not finding h1 element

Question

I am creating my very first Cucumber test with protractor. When the browser starts up, and navigates to /login, it should find the h1 tag and get the text. This doesn't seem to be working. Visually, the browser starts up and goes to the login page but it seems as if it closes before it even loads the component for that route. I am then given the following error:

1) Scenario: Login Page # e2e/src/features/login-page.feature:3
   ✔ Before # e2e/src/steps/login-page.steps.ts:9
   ✔ Given I am on the login page # e2e/src/steps/login-page.steps.ts:13
   ✖ Then I should see the login title # e2e/src/steps/login-page.steps.ts:17
       NoSuchElementError: No element found using locator: By(css selector, h1)

My feature looks like this:

Feature: Go to the login page
  @Regression
  Scenario: Login Page
    Given I am on the login page
    Then I should see the login title

and my steps look like this:

import { expect } from 'chai';
import { Before, Given, Then } from 'cucumber';
import { browser, by, element } from 'protractor';
import { LoginPage } from '../pages/login-page.po';

Given('I am on the login page', async () => {
  await browser.get('/login');
});

Then('I should see the login title', async () => {
  expect(await element(by.css('h1')).getText()).to.equal('Login');
});

Answer 1

The fix for me seemed to be modifying the onPrepare to do some extra waiting (which I found in an old github comment)

  onPrepare() {
    browser.manage().timeouts().pageLoadTimeout(40000)
    browser.manage().timeouts().implicitlyWait(25000)
    // If you need to navigate to a page which does not use Angular,
    // you can turn off waiting for Angular
    browser.ignoreSynchronization = true
    browser.get('https://localhost:4200')
    browser.waitForAngular()
    require('ts-node').register({
      project: path.join(__dirname, './tsconfig.e2e.json')
    })
  },