Angular CLI get current port used

Question

In Angular CLI you can set custom port with the --port command, --port=4201 for example.

What I need to do is somehow get this port value so I can point to the correct server in my code but I'm unable to find such a way.

The reason for this is because if I use the default 4200 like this:

export const environment = {
  production: false,
  host: 'http://localhost:4200'
}

Then I won't be able to use --port without the code breaking.

Is this possible?

score 4 · Accepted Answer · answered Mar 05 '18 at 10:15

4

If you really want to have the environment config to point at the correct port at build time, you need to set up yourself a mecanism that'll get the correct port.

You could create your own run script (npm/sh/...), pass the port to that script. Then, that script will:

Modify the port in the environment.ts file
Start ng serve with the --port option

If you just want to use current host/port at runtime, you can just get it using

let host = `${window.location.protocol}//${window.location.host}`

answered Mar 05 '18 at 10:15

David

33,444
11
80
118

Any idea how to do this in a e2e (protractor) test where `window` is not defined? – OrangeDog Dec 03 '19 at 15:13
It always taking a single slash(/) instead of a double slash(//). Any idea how to get rid of this? – Satrughna Aug 23 '21 at 06:01

score 2 · Answer 2 · answered Jan 17 '20 at 14:01

You can get port number with following command:

window.location.port // it will give you port number

let url = `${window.location.protocol}//${window.location.hostname}`

// if port is specified in the url then it will be shown to you
if(window.location.port) {
  url += `:${window.location.port}`
}

let html = document.getElementById("portDiv")
html.innerHTML = url;

<div id="portDiv"></div>

score -1 · Answer 3 · answered Mar 05 '18 at 09:38

-1

If you are using following lines for changing port after your app start then it will not work.

export const environment = {
 production: false,
 host: 'http://localhost:4200'
}

But if you have .angular-cli.json file then change following lines to change port : { "defaults": { "serve": { "port": 8080 } } }

answered Mar 05 '18 at 09:38

Amit Gaikwad

516
4
12

1

This is not what I'm asking. I know how to set the port but I need to get the port being used. – Chrillewoodz Mar 05 '18 at 09:43

Angular CLI get current port used

3 Answers3