Using input box with element by.id Protractor Testing error

I'm trying to use ids with my input box's within my login page but I get the following error with Protractor:

Failed: No element found using locator: By css selector, *[id="signin--username"])

Here is my log-in.js

var logIn = function() {
    this.navigate = function() {
        browser.get(browser.params.server);
    };
    this.usernameInputBox = element(by.id('signin--username'));
    this.passwordInputBox = element(by.id('signin--password'));
    this.dontHaveAnAccountButton = element(by.id('signin--no-account-question'));

    this.logInButton = element(by.id('signin--log-in'));
    this.Modal = element(by.css('.modal-dialog'));
    this.ModalButton = element(by.xpath('//*[@id="app"]/div[3]/div/div/form/div[3]/button'));
};

module.exports = new logIn();

Snippet from log-in.html

<div class="form-group">
  <div class="input-group input-group-lg">
    <span class="input-group-addon">
       <span class="glyphicon glyphicon-user"></span>
        </span>
          <input type="text"
           id="signin--username" 
           class="form-control"
           placeholder="{{'username' | translate}}" 
           ng-model="username"
           name="username" 
           required
           autofocus data-autofill
           >
   </div>
</div>

Any help much appreciated! Thanks.