keep get [WDS] disconnected!

[luzly]

OS?

Windows 10

Versions.

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.24]
node: 6.9.1
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.8

Repro steps.

use ng new PROJECT create a new project without any modification, keep get [WDS] disconnected! error after ng serve.

The error only appears under Chrome, both version 55 and 56, it works fine in Mircrosoft Edge and other browsers. I've searched the internet, most solution is about webpack, but I don't know how to config this with angular-cli. I wonder whether this is a bug related to Chrome or not, anyway, even a newly created project suffers.

Thank you for help!

@luzly have you tried to reset Chrome settings to defaults?

[Markus-ipse]

I have the same problem (in Chrome 56), but it only happens when I use ng serve --ssl
And it varies wildly in severity. Sometimes it only happens once or twice after I've changed a file and sometimes it gets disconnected (and thus reloads) 10+ times before finally settling, and other times it works flawlessly..

Versions
@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.31]
node: 7.3.0
os: win32 x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.4.4
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.4

[violinbg]

I had the exact same issue - when using SSL. What was happening is that the WebSocket would get closed/dropped with a handshake error. (I could see the error in Chromium, but not Chrome). In my case the certificate that the "webpack-dev-server" is using is self-signed and so I had the option "chrome://flags/#allow-insecure-localhost" enabled to ignore the "page not secured" message. Installing the certificate in Chrome as Trusted Root fixed the "[WSD] Disconnected!" issue.

I got the certificate from "\node_modules\webpack-dev-server\ssl" and extracted it manually from the file then imported in Chrome and disabled the "allow-insecure-localhost". Importing the certificate via MMC didn't work for me - I had to do it in Chrome. (This is on Windows 7)

[filipesilva]

Closing as answered, thanks @violinbg !

[FabienDehopre]

I still receive the [WDS] Disconnected! error message after recompiling.
I added the webpack-dev-server ssl certificate as well as my self-signed certificate to the Trusted Root Certificates in Google Chrome.
Any idea?

[veke]

@violinbg Can you give more step by step guide to do that extraction etc to get around this?

[violinbg]

With some of the recent updates of Chrome, the browser now rejects certificates that don't have SAN (Subject Alternative Name). If the cert doesn't have the "Subject Alternative Name" - you need to figure out how to create a new self-signed cert with SAN - I googled for a while and it wasn't as easy as I hoped.

So double check the certificate you are using has that, then install it to Chrome via Settings -> Show Advanced -> Manage Certs -> Then add it to "Trusted Root..."; (after that make sure all "chrome.exe" processes are closed/restarted - or change won't have effect)

You can also play with the "chrome://flags/#allow-insecure-localhost" option in Chrome or disable SSL in Angular.

I hope this helps somewhat. As I pointed earlier - I had the issue because I was using HTTPS . If you are not or you still have the issue - I would suggest to download Chromium - you'll see more error messages in the Console Log - so it may help to figure out exactly what's happening.

PS: For the extraction of the certificate. In \node_modules\webpack-dev-server\ssl open the file "server.pem" and copy the text between BEGIN/END CERTIFICATE; Paste in new file and name it SOMENAME.CRT; You can then install that in Chrome. (I'm not sure anymore if that's the cert it uses by default. Angular is changing pretty fast...)

[veke]

@violinbg Thanks for the reply. Yes I'm using self signed certificate and need to run app in https, so I need to fix this somehow. I will investigate this more with your instructions. Thanks

[veke]

Im still having this problem on win/chrome and also mac safari. Any of those tips mentioned earlier did not work for me.
With Safari 10.1.1 Im getting reload loop with error:
WebSocket network error: OSStatus Error -9807: Invalid certificate chain
[WSD] Disconnected

[veke]

Updating to chrome 59 seems to work on Mac and Windows.
Also when settings certificate as trusted on Safari seems to work too.

[mikejhill]

I am still seeing this issue in Chrome 59. It seems to go away when disabling SSL on ng serve.

[veke]

@hill0826 Hmm...verify you run latest angular? and angular cli.