Protractor E2E testing on Angular2: Page not loaded ERR_CONNECTION_REFUSED

Question

I have been stuck for 2 days trying to create E2E tests for our angular2 application. We used angular-cli to scaffold our whole app: our app is served correctly with ng serve or ng build. Therefore, we are able to deploy it successfully on a remote server.

However, nothing seems to work when trying to test it with protractor. Once I run the command "protractor", chrome is launched and I directly get ERR_CONNECTION_REFUSED. The page is not loaded and I get the following error in the console: E/protractor - could not find Angular on page http://localhost:8100/ : retries looking for angular exceeded

System version: Protractor: Version 4.0.11 Angular2: Version 2.1.0

protractor.conf.js

/ Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter')

exports.config = {
allScriptsTimeout: 11000,
specs: [
    './e2e/**/*.e2e-spec.ts'
],
capabilities: {
    'browserName': 'chrome',
},
directConnect: true,
baseUrl: 'http://localhost:8100',
framework: 'jasmine',
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
},

onPrepare: function() {
    browser.ignoreSynchronization = true
},
useAllAngular2AppRoots: true,
beforeLaunch: function() {
    require('ts-node').register({
        project: 'e2e'
    })
},
onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter())
}
}

e2e/app.po.ts

 import { browser, element, by } from 'protractor'

 export class KYCFRONTENDPage {
    navigateTo() {
            return browser.get('/')
        }

   getParagraphText() {
        return element(by.css('app-root h1')).getText()
        }
    }

e2e/app.e2e-spec.ts

 import { KYCFRONTENDPage } from './app.po';

 describe('kyc-frontend App', function() {
 let page: KYCFRONTENDPage;

   beforeEach(() => {
     page = new KYCFRONTENDPage();
   });

   it('should display message saying app works', () => {
      page.navigateTo();
       expect(page.getParagraphText()).toEqual('app works!');
    });
   });