Angular-cli: Port/address binding issue using ng-serve

[rmedaer]

Versions

Angular CLI: 1.5.0
Node: 9.2.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.2
webpack: 3.8.1

Repro steps

It might be useful to read the last paragraph to understand the issue first.

• Bind on port 80 + address 127.0.0.3 with 3rd tool. Example:

authbind nc -l -p 80 -s 127.0.0.3

• Make sure that you're binding using netstat:

Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 127.0.0.3:80            0.0.0.0:*               LISTEN      26166/nc            

• Start Angular CLI as following:

authbind ng serve --port 80 --host 127.0.0.2

Observed behavior

Angular CLI answer that the port is already in use ...

Port 80 is already in use. Use '--port' to specify a different port.

This answer is coming from portfinder#getPort.
I listen to you:

It's an issue in portfinder !

Well, I don't think so. Even if the documentation of portfinder is not explicit, by definition, portfinder try to find a port .. So, as I understand, we should change the testing procedure in Angular CLI (utilities/check-port.js) to only test the given port with given address otherwise default value 0.0.0.0.

Furthermore, portfinder is testing all the ports and binding addresses ! WTF ?! I might be (for sure) a big improvement to test only what we have to use.

Desired behavior

Do not test all the ports and binding addresses !

Mention any other details that might be useful (optional)

Let me introduce the way I work to understand the issue. When I develop an Angular app, I have so many times constraints linked to CORS. I try to be as close as possible then a production environment using domain name resolution and address binding on localhost. In my setup I have a backend API and its front-end using Angular CLI (only for development purpose). Here is my development network setup:

• Frontend: domain=myapp.com address=127.0.0.2 port=80
• Backend: domain=api.myapp.com address=127.0.0.3 port=80
• !! Obviously nothing is listening on 0.0.0.0:80 !!

Thus I'm starting Angular CLI with options ng serve --port 80 --host 127.0.0.2 (...). In order to use port 80 as non-root user, I'm also using authbind (any way).

The issue is that I get the following error:

Port 80 is already in use. Use '--port' to specify a different port. 

[rmedaer]

I made the following test but it disabling the feature: "get next available port".
However it works with following command line:

authbind --deep ng serve --port 80 --host myapp.com

For those who want to use an IP address as --host, you also have to provide the --public-host parameter.

authbind --deep ng serve --port 80 --host 127.0.0.2 --public-host myapp.com

[filipesilva]

Would you be interested in making a PR to improve the port finding behaviour?

[rmedaer]

Hi @filipesilva ,

I'll do a PR as soon as possible !

[tiaguinho]

@filipesilva #13292 was merged, this can be closed.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}