title: protractor typescript pageobject property undefined
body: <p>Hi I'm getting the following error when I use POM in protractor typescript with angular cli "Cannot read property 'sendUsername' of undefined". I'm new to typescript, please suggest me how to resolve this issue.</p>
  
  <p><code>error</code></p>
  
  <p>Failed: Cannot read property 'sendUsername' of undefined</p>
  
  <p><code>app.e2e-spec.ts</code></p>
  
  <pre><code>import { PatientInquiryPrototypePage } from './patiq-common.po';
  import { LoginAdmin } from './patiq-login.po';
  
  describe('patient-inquiry-prototype App', () =&gt; {
  let page: PatientInquiryPrototypePage;
  let loginAdmin: LoginAdmin;
  
  beforeEach(() =&gt; {
  page = new PatientInquiryPrototypePage();
  });
  
  it('Launch the Test URL', () =&gt; {
    page.navigateTo();
  });
  
  it('Login as Administrator', () =&gt; {
  
    loginAdmin.sendUsername('PILabAdmin');
    loginAdmin.sendPassword('password$123');
    loginAdmin.openHostSystem();
    loginAdmin.selectHostSystem();
    loginAdmin.openHostRole();
    loginAdmin.selectHostRole();
  
    });
    });
  </code></pre>
  
  <p><code>patiq-login.po.ts</code></p>
  
  <pre><code>import { browser, by, element, protractor, ExpectedConditions, $, $$ } from 'protractor';
  
  export class LoginAdmin {
  
  sendUsername(Username: string) {
      return element(by.css('[formcontrolname="username"]')).sendKeys(Username);
  }
  
  sendPassword(Password: string) {
      return element(by.css('[formcontrolname="password"]')).sendKeys(Password);
  }
  
  openHostSystem() {
      return element(by.css('[formcontrolname="hostSystem"]')).click();
  }
  
  selectHostSystem() {
      return element(by.css('[class="mat-option"]')).get(0).click();
  }
  
  openHostRole() {
      return element(by.css('[formcontrolname="hostRole"]')).click();
  }
  
  selectHostRole() {
      return element(by.css('[class="mat-option"]')).get(6).click();
  }
  }
  </code></pre>