Angular-cli: 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!

[ghost]

@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_moduleswebpack-dev-serverssl" 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_moduleswebpack-dev-serverssl 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.

[mikejhill]

@veke good question. yes, here's the output of ng version for me:

@angular/cli: 1.1.2
node: 8.1.2
os: win32 x64
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.3
@angular/language-service: 4.2.3

I'm on Windows 10 and Chrome 59. We don't have a strong requirement for SSL in development environments right now so we're going to disable it for the time-being, but it would be nice to have.

This issue seems to relate to https://github.com/webpack/webpack-dev-server/issues/941 and potentially https://github.com/webpack/webpack-dev-server/issues/851.

[veke]

@hill0826 Strange, I have angular 4.2.2 and cli 1.1.2 on mac and works for me. And on windows 7 chrome 59 works for me too. (don't have access to see exact module versions, but are quite similar)

[FabienDehopre]

I have the latest CLI version and Chrome 59 installed and I still have the issue but not as often as with previous version of Chrome and CLI.
I added both my self-signed certificate for the website and the certificate that comes with webpack-dev-server in the Thrusted Root Certificates.

[violinbg]

Do you guys have a green bar(indicator for the cert) in Chrome when you have the redirect issue? If you don't it's most certainly a SSL issue. You can see the actual error in the console log if you try with Chromium. It would probably be something like "SSL handshake failed".

Last time I had the issue was with the latest Chrome version refusing to accept self-signed certificates with no SAN. The certificate that comes with the "webpack-dev-server" doesn't have SAN. So I created a new cert with SAN and it's working fine at this time.

[veke]

@violinbg Do you have some easy guide to create self signed cert with SAN?

[bseiller]

@veke:
I don't know about easy, but here are some very strong hints:
https://bugs.chromium.org/p/chromium/issues/detail?id=704199#c6
I also collected some links here:
https://github.com/webpack/webpack-dev-server/issues/941#issuecomment-310639952

[cwalv]

@veke
you can also use the same package that WDS uses to do it manually:

$ node
> const selfsigned = require("selfsigned")
undefined
> const attrs = [{ name: "commonName", value: "localhost" }, { name: "subjectAltName", value: "localhost" }]
undefined
> const pems = selfsigned.generate(attrs, {
...     algorithm: "sha256",
...     days: 30,
...     keySize: 2048
... });
undefined
> const fs = require("fs");
undefined
> fs.writeFileSync("/tmp/server.pem", pems.private + pems.cert, { encoding: "utf-8" });

This seems to have fixed it for me; included a PR

[veke]

@cwalv Thanks. I will test this.

[veke]

@cwalv
Those attributes passed as first options to selfsigned.generate() function containing subjectAltName is not the one Chrome is complaining. It is SAN extension field and should be included in the second options object. You can see the options from selfsigned manual.
extensions: [{ name: 'basicConstraints', cA: true }], // certificate extensions array

[violinbg]

@veke,
So did you manage to create one with node.js? Just wonder if it's easier because all the instructions for OpenSSL look a bit complicated.

I made my a cert with the PowerShell command New-SelfSignedCertificate, but it's only available in Windows 10 (and maybe 8).

[veke]

@violinbg @cwalv
I got green certificate in chrome with this:

const fs = require("fs");
const selfsigned = require("selfsigned");
const attrs = [{ name: "commonName", value: "localhost" }];
const pems = selfsigned.generate(attrs, {
    algorithm: "sha256",
    keySize: 2048,
    extensions: [{
        name: "subjectAltName",
        altNames: [{
            type: 2, // DNS
            value: "localhost"
        }]
    }]
});

fs.writeFileSync("./ssl/server.crt", pems.cert, { encoding: "utf-8" });
fs.writeFileSync("./ssl/server.key", pems.private, { encoding: "utf-8" });

It is valid for 365 days (default value).
Made a sslgen.js file to project root folder. Then I also added cert to keychains as trusted.

[violinbg]

@veke Thanks! That script will come handy :)

[veke]

Edited extension parameters. Removed URI and IP. Still got green certificate.

[fernandops26]

i am using nginx but the cert generated by selfsigned(node) not working with my domain https://mydomain.m? some idea?,

[veke]

Did you added it in your OS too?

[fernandops26]

@veke yes :(, Neither with localhost

[veke]

if you have latest browsers and cli installed, I have no idea. This is strange that some work for other and other not. Try to add those IP and URI fields back to script.

{
   type: 6, // URI 
   value: 'localhost' // example
},
{
    type: 7, // IP 
    ip: '127.0.0.1'
  }

I got green certificate with that node script in two machines running OSX (haven't tested on windows yet)

[veke]

What is the error in your certificate? In Chrome you need to open your dev-tools and look for security tab.

[fernandops26]

@veke this is the error:
"There are issues with the site's certificate chain (net::ERR_CERT_AUTHORITY_INVALID)."

[fernandops26]

@veke the code for generate cert:

const fs = require("fs");
const selfsigned = require("selfsigned");
const attrs = [{ name: "commonName", value: "mydomain.m" }];
const pems = selfsigned.generate(attrs, {
    algorithm: "sha256",
    keySize: 2048,
    extensions: [{
        name: "subjectAltName",
        altNames: [{
            type: 2, // DNS
            value: "localhost"
        },
    {
        type: 6, // URI 
            value: 'https://mydomain.m'
        },
        {
            type: 7, // IP 
            ip: '127.0.0.1'
        }
        ]
    }]
});

fs.writeFileSync("./server.crt", pems.cert, { encoding: "utf-8" });
fs.writeFileSync("./server.key", pems.private, { encoding: "utf-8" });

[veke]

I deal this stuff only with local development / angular related stuff. Im not even sure you can use these in real domains :D
I've seen commonName values *domain.com sometimes, maybe they need to match to those subjectAltname fields somehow... I have no idea, sorry.

[pdbroadfoot]

@fernandops26 Certificates are read by the browser. The browser goes to a certification authority to validate the certificate. The certification authority says if the certificate is correct. With a self signed certificate there is no certification authority - so the browser can't trust it.

For a local dev environment, you can see its your certificate and so can choose to trust it - but its still not a correct certificate as it's self signed and doesn't have a certification authority associated with it. So the browser raises this ERR_CERT_AUTHORITY_INVALID.

The trick (which I still don't know how) is to get the browser to trust the certificate for your dev environment. You shouldn't ever trust a self signed certificate from real server and system admins shouldn't have a self signed certificate on a server to make it work.

This is my "basic" understanding of certificates at the moment

[abergs]

I used @veke code and it worked:

1. generate your own cert using this code.
2. install that cert in User Store > Trusted Root Certification (windows 10)
3. Tell webpack to use that cert by "--https --cert ./ssl/server.crt --key ./ssl/server.key
4. Profit
5. Take printscreens and write a readme.txt in ./ssl for next year.

[fernandops26]

[SOLVED] With this reference you can also solve the problem, thanks:
https://alexanderzeitler.com/articles/Fixing-Chrome-missing_subjectAltName-selfsigned-cert-openssl/

[aashish-ak]

[SOLVED] run the angular app using npm start instead of ng serve

[Cubelaster]

thanks @abergs for your solution. That worked for me.

[farnetani]

I created file vue.config.js in root project with content below:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

To me solved!

[whizkidwwe1217]

@farnetani Are you using Vue? I think you're in a wrong repo. If you could explain and demonstrate that your solution will work in Angular CLI then it would be very much helpful.

[william-creative-cx]

I finally got the issue resolved by simply checking my package.json to see if there's a webpack dependency, in my case, there was none so I ran the following"
npm install webpack-dev-server --save-dev

I hope this helps someone.

[Alex-Samari]

I finally got the issue resolved by simply checking my package.json to see if there's a webpack dependency, in my case, there was none so I ran the following"
npm install webpack-dev-server --save-dev

I hope this helps someone.

@william-creative-cx
Didn't really fix the WDS issue but reminded me to fix my dev dependencies so thanks!

[zhnedyalkow]

Hi,

As suggested earlier in my case running angular 8 (Ubuntu OS) with "sudo npm start" seems to be working correctly now.
Seems that this is not general for everyone.

BR,
Zhi

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