How to specify the port and host for ng e2e using

Question

How do you set the port and host for the ng e2e command using a configuration file?

I am aware that it is possible to use the following statement at the command line

ng e2e --port <port number> --host <host>

This works nicely, but it would be more convenient to set the port and address in the configuration file. I have looked inside .angular-cli.json and found that there is a file called protractor.config.js, I've not been able to figure out what settings to use in that file, there's a baseUrl setting, but changing that does not make any difference to the port that is used by the ng e2e command. It seems to be using a random port.

Aside from baseUrl I have also tried setting port and seleniumPort but they make no difference.

After entering the ng e2e command the following output appears in the in the console

** NG Live Development Server is running on http://localhost:49155 **

In the protractor.config.js I have baseUrl set as http://localhost:50000. I have observed the tests executing and I can see that the browser is using the address http://localhost:49155 which is not the address that I desire.

ng --version returns the followin

@angular/cli: 1.0.0
node: 7.7.1
os: win32 x64
@angular/common: 4.0.3
@angular/compiler: 4.0.3
@angular/core: 4.0.3
@angular/forms: 4.0.3
@angular/http: 4.0.3
@angular/platform-browser: 4.0.3
@angular/platform-browser-dynamic: 4.0.3
@angular/router: 4.0.3
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.3

Answer 1

Set the host and port in angular.json by modifying the project webapp-e2e , e.g:

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "./protractor.conf.js",
    "devServerTarget": "webapp:serve",
    "port": 4201
  }

This will override the port being used once webapp:serve-command is invoked by angular-cli. Forget the protractor.conf.js file - it's not used until later in the process.

Thus you can run ng serve --watch (for serving and unit tests) and ng e2e (for e2e tests) independently or in parallell.

br, Jens

Answer 2

I have found out that when we call the command ng e2e, the development server will be running by default on http://localhost:49152/

To be able to specify the port and host for ng e2e using configuration we will use the property baseUrlon the protractor.conf.js file. We will need to:

• serve the app separatly
• then we set serve to false when calling ng e2e, so Protratcor will communication with baseUrl directly

For example:

• we need first, on the protractor.conf.js to put:
  baseUrl:'http://localhost:8088'
  
• run the command :
  ng serve --port 8088
  
• on another shell run the test:
  ng e2e --serve false

There is also another maneuver where we don't use baseUrl. we only need to:
- in shell 1 run: ng serve --port 4200
- in shell 2 run: ng e2e --serve false --base-href=http://localhost:4200

Answer 3

I have not seen a config for the port the dev server runs on when running ng e2e

your best bet is probably an NPM script: https://docs.npmjs.com/misc/scripts

1. Add "e2e":"ng e2e --port <port number> --host <host>" to package.json under scripts
2. Use the script by running npm run e2e, this will run the script e2e in package.json, in this case your ng e2e --port <port number> --host <host>

It isnt a config file, but it works just like one.

Answer 4

baseUrl property somehow does not work in protractor.config.js, but you can programatically set the property in onPrepare method in the same config.js

{
    onPrepare() {
        browser.baseUrl = 'http://localhost:4200/';
    },
}

I have been using this solution in Angular 1.x, still works for Angular 2/4