No element found using locator error in protractor test with page object

app.e2e.test.ts

import { browser } from 'protractor';
import { App } from '../pageobjects/App'
const BASE_URL = 'http://localhost:1344';

describe('App', () => {

  let app: App;

  beforeEach(() => {
    browser.get(BASE_URL).then(function() {
      app = new App();
    });
  });

  it('should verify text on page', () => {
    browser.sleep(5000);
    console.log('after 1st sleep');
    app.name.getText().then(function(text: any) {
      browser.sleep(5000);
      console.log('text: ' + text);
    });
  });
});

app.ts

import { $ } from 'protractor';
export class App {

  public name: any;

  constructor() {
    console.log('constructor');
    this.name = $('#name');
  }
}

app.component.html

<h1 id="name">text from element</h1>

Output:

[15:13:03] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
Started
constructor
after 1st sleep
F

Failures:
1) App should verify text on page
  Message:
    Failed: No element found using locator: By(css selector, #name)
  Stack:
    NoSuchElementError: No element found using locator: By(css selector, #name)