Angular-cli: ng serve --open reports port 4200 is already in use when it isn't

[fmorriso]

ng serve --open incorrectly reports that port 4200 is in use, even when no browsers are open.

Versions

Angular CLI: 1.6.7
Node: 8.9.4
OS: win32 x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Repro steps

• ng new aatest1 -si
• cd aatest1
• npm install
• ng serve --open

Observed behavior

ps>ng serve --open
Port 4200 is already in use. Use '--port' to specify a different port.

Desired behavior

ng serve --open should work correctly

Mention any other details that might be useful (optional)

The above behavior did NOT occur with Angular-CLI 1.6.6 or earlier.

Work-around

specify --port 4216 (any value between 4200 and 4215 causes the above mentioned error)

[clydin]

If you are receiving that error, something on your system is listening on that port. If on Windows, you can use netstat -abno to find which process is listening on the port(s) in question.

[fmorriso]

ps>sl aaTest1
ps>ng serve --open
Port 4200 is already in use. Use '--port' to specify a different port.
ps>netstat -abno | out-file "$env:temp\aatest.txt" -Force -Width 1024 -encoding ASCII
ps>npp "$env:temp\aatest.txt"
ps>

I have attached the output from netstat. I cannot find anything that is listening on ports 4200 through 4215, the ones that no longer work as of Angular-CLI 1.6.7.

It's as if the parsing of the default port number's last two digits (00) is messed up because specifying port 4216 or above seems to work.

If I specify port 4201, for example, I still get the same error (port 4201 is in use):

ng serve --open --port=4201

Only ports 4216 and above work for me. Example:

ng serve --open --port=4216

aatest.txt

[fmorriso]

Follow up, with possible cause and work-around:

Based on an experiment, I have a theory about why Angular-CLI 1.6.7 reports "__port 4200 is already in use__" when that should not be the case.

I few days ago, as part of a tutorial, I installed Docker for Windows and turned on the "Containers" feature in Control Panel / Windows Features on my Windows 10 computer (Version 1709, build 16299.192).

That seemed to correspond with the sudden failure of Angular-CLI's ng serve –open command. The only way to run Angular-CLI's serve command was to explicitly specify a port number higher than 4215 (4200 through 4215 all reported those ports were already in use).

Next, I uninstalled just Docker for Windows, leaving the "Containers" Windows Feature installed.

There was no change in the behavior (failure in this case of Angular-CLI's ng serve –open – same error about port 4200 being in use when no browser windows were open. Any attempt to specify a specific port in the range 4200-4215 met with the same failure result. The only way to run was, for example:

ng serve --open --port=4216

Next, I uninstalled the "Containers" Windows Feature.

At that point, Angular-CLI began working again with the default port 4200.

Based on my experience, Angular-CLI cannot peacefully coexist with the combination of Docker for Windows and the "Containers" Windows Feature.

I leave it somebody else to dig deeper into the underlying cause. Suffice for now, I know not to try to use Docker for Windows and Angular-CLI on the same computer unless I am prepared to use a port above 4215 when invoking ng serve --open.

[gmarab]

I confirm that the error is present in Windows from version 1.6.7 and later.
It occurs every time the application build stops due to some errors.
Evidently in case of an error the used door is not closed.
What instead happens correctly until version 1.6.6

[fmorriso]

@gmarab : correct. It is still happening to me with Angular-CLI 1.7.0.

I have to "fight the tool" (Angular-CLI in this case) by constantly changing the --port value if an error occurs and I have to start the process up again:

ng serve --open  --port=4201 --vendor-chunk --extract-css --common-chunk --named-chunks --output-hashing=none --progress

It's annoying and I hope this gets fixed soon.

[alexzuza]

The same here. Seems dup of https://github.com/angular/angular-cli/issues/9647

[fmorriso]

Until this issue is resolved, Windows users can run the following PowerShell script that will find and kill the process that is still using Port 4200:

<#
  Purpose: Kills the process that is listening on the specified port (default port is 4200)
  Author: Fred Morrison
  Date: 2018-02-18
  Intended Purpose: Overcome bug in Angular-CLI 1.7.0 that fails to fully kill the process that it started via:
                    ng start --open 
                    even when the user thinks it has been killed in their command/powershell prompt.

#>
param([int] $port = 4200)
# Remember user's current preference
$previousVerbosePreference = $VerbosePreference
if($previousVerbosePreference -ne 'Continue')
{
  $VerbosePreference = 'Continue'
}
[string] $cmd = '$a = NETSTAT.EXE -a -o -n'
Write-Verbose -Message $cmd
Invoke-Expression -Command $cmd

$p = $a.trim() | 
  Select-Object -Skip 4 | 
  ConvertFrom-String -PropertyNames Protocol, LocalAddress, RemoteAddress, State, PID
#$p | Format-Table
$portToKill = $p | 
  Where-Object -Property LocalAddress -EQ -Value ('127.0.0.1:{0}' -f $port) |
  Where-Object -Property State -EQ -Value 'LISTENING'

if($portToKill -eq $null)
{
  Write-Verbose -Message ('port {0} is not in use. No action taken.' -f $port)
}
else 
{
  $pidToKill = $portToKill.PID
  $cmd = "Taskkill /F /PID $pidToKill"
  Write-Verbose -Message $cmd
  Invoke-Command -ScriptBlock ([ScriptBlock]::Create($cmd))
}
# restore user's preference
$VerbosePreference = $previousVerbosePreference

Example output when port 4200 is being used:

VERBOSE: $a = NETSTAT.EXE -a -o -n
VERBOSE: Taskkill /F /PID 12176
SUCCESS: The process with PID 12176 has been terminated.

Example output when port 4200 is not being used:

VERBOSE: $a = NETSTAT.EXE -a -o -n
VERBOSE: port 4200 is not in use. No action taken.

[nadhir-falta]

Any solutions for this issue?
We started having this problem on 1.7.0.

[fmorriso]

I have not seen the issue with Angular-CLI 1.7.3

[nadhir-falta]

1.7.3 seems to fix the issue.
Thank you

[m-farahmand]

I got this problem in 1.7.4 .
It works correctly in cmd but in webstrom when I stop it in npm task runner this problem appears.

[singhkeshav]

fuser -n tcp -k 4200
ng serve

[marie-dk]

On a mac:
netstat -anv | grep 4200

[apgeo]

In my case after I updated angular (and angular/cli) to 5.5.1 and several other packages I have the following script which generates this error:
set PORT=8082 && ng serve --port 8082 --ec=true
Previously (unknown package configuration) it was working. Also I have checked the port is not used.

Solved it by replacing the script with:
ng serve --port 8082 --ec=true

OS: Windows 7 x64

[AltRoot17]

The solution worked for me was
ng serve --port 4401
(You can change 4401 to whatever number you want)

Then launch browser -> http://localhost:4401/

Basically, I was having two Applications and with the help of the above approach now I am able to run both of them simultaneously in my development environment.

[stephenjesus]

Ubuntu ( terminal command )
kill -9 $(lsof -i tcp:4200 -t)

[kumarrrr]

Earlier it was 6.0 angular cli update it to 6.2
sudo npm install -g @angular/[email protected]
It worked perfect

[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._}