Angular 2 end to end tests with Protractor ci

Question

I've made a project using the angular2-seed. I wanted to write some e2e tests for it. Successfully got them running locally, however with e2e testing in Travis-C there is an issue that it cannot find the elements the test uses.

For example I have a sidebar-menu component:

import {Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'sidebar-menu',
    directives: [ ROUTER_DIRECTIVES ],
    templateUrl: 'app/shared/sidebar-menu/sidebar-menu.html'
})

export class SidebarMenuComponent {}

Using the sidebar-menu html:

<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
  <div class="menu_section">
    <h3>Algemeen</h3>
    <ul class="nav side-menu">
        <li><a [routerLink]="['/']"><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a></li>
    </ul>
  </div>
</div>

And the e2e test that I wrote:

describe('Sidebar', () => {
  beforeEach( () => {
      browser.get('/');
  });

  it('Side menu should have the right title', () => {
      expect(element(by.css('#sidebar-menu h3')).getText()).toEqual('ALGEMEEN');
  });
});

When I run this locally using npm run e2e.ci it works and the test passes. However on travis-ci the test does not pass and it simply says "expected '' to equal 'ALGEMEEN'". Don't know what I'm doing wrong.

I'm using Angular 2 RC1 and travis uses NodeJS 5/6.

Travis-ci output:

1) Sidebar Side menu should have the right title
  Message:
    Expected '' to equal 'ALGEMEEN'.
  Stack:
    Error: Failed expectation
        at Object.<anonymous> (app/shared/sidebar-menu/sidebar-menu.component.e2e-spec.ts:11:60)
        at /home/travis/build/node_modules/jasminewd2/index.js:96:23
        at new Promise (/home/travis/build/node_modules/selenium-webdriver/lib/promise.js:1043:7)
        at controlFlowExecute (/home/travis/build/node_modules/jasminewd2/index.js:82:18)
        at TaskQueue.execute_ (/home/travis/build/node_modules/selenium-webdriver/lib/promise.js:2790:14)
        at TaskQueue.executeNext_ (/home/travis/build/node_modules/selenium-webdriver/lib/promise.js:2773:21)
        at /home/travis/build/node_modules/selenium-webdriver/lib/promise.js:2697:25
        at /home/travis/build/node_modules/selenium-webdriver/lib/promise.js:639:7
        at process._tickCallback (internal/process/next_tick.js:103:7)

Travis.yml:

language: node_js
node_js:
  - 5
  - 6

sudo: false

before_install:
  - export CHROME_BIN=chromium-browser  # Karma CI
  - export DISPLAY=:99.0

before_script:
  - sh -e /etc/init.d/xvfb start
  - nohup bash -c webdriver-manager start 2>&1 &  # Protractor CI
  - sleep 1  # give server time to start

after_failure:
  - cat /home/travis/build/mgechev/angular2-seed/npm-debug.log

cache:
  directories: node_modules

script:
  - npm run tests.all

Protractor.conf.js:

const config = {
  baseUrl: 'http://localhost:5555/',
  restartBrowserBetweenTests: false,

  specs: [
    './dist/dev/**/*.e2e-spec.js'
  ],

  exclude: [],

  // 'jasmine' by default will use the latest jasmine framework
  framework: 'jasmine2',

  // allScriptsTimeout: 110000,

  jasmineNodeOpts: {
    // showTiming: true,
    showColors: true,
    isVerbose: false,
    includeStackTrace: false,
    // defaultTimeoutInterval: 400000
  },

  directConnect: true,

  capabilities: {
    browserName: 'chrome'
  },

  onPrepare: function() {
    const SpecReporter = require('jasmine-spec-reporter');
    // add jasmine spec reporter
    jasmine.getEnv().addReporter(new SpecReporter({ displayStacktrace: true }));

    browser.ignoreSynchronization = false;
  },


  /**
   * Angular 2 configuration
   *
   * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
   * `rootEl`
   */
  useAllAngular2AppRoots: true
};

if (process.env.TRAVIS) {
  config.capabilities = {
    browserName: 'firefox'
  };
}

exports.config = config;