How to solve [WDS] Disconnected! error in Angular 7 and Ionic 4

user_4628787 0
Viewed 14172

When working with latest Angular (7) and ionic (4) I got the error

[WDS] Disconnected!

every time I run my app via

ionic serve --consolelogs --no-open --browser='firefox developer edition' --source-map

in the latest firefox developer edition. I tested other brothers too and it appears in the most.

ionic-framework angular ssl-certificate
3 Answers

The solution was not simple, I have read many stack questions and their answers and also searched the web a few times, without a good solution until I have read this issue on GitHub:

https://github.com/angular/angular-cli/issues/4839

So this error is a simple SSL error, as I understood the browser could not verify the certificate from which webpack dev server has send to the browser.

The Solution

When using ionic (4) you can simply type ionic ssl generate in the root of your project and then go to your browser settings:

  • Firefox (65.0b8): Settings -> Safety -> Scroll down to "Certificates" -> Click on "Show certificates" -> Click on "Import" -> Choose the generated cert.pem from your project -> restart (CMD+Q) your browser
  • Chrome on macOS (77): install the cert in Keychain and allow all
  • Others: must be similiar to firefox

If you just use Angular with Webpack you can generate a certificate by using this script: https://github.com/angular/angular-cli/issues/4839#issuecomment-314608490 and follow this https://brianflove.com/2016/10/22/angular-cli-using-https/

user_46287870

If you are using Chrome you can try allowing invalid certificates for resources loaded from localhost:

chrome://flags/#allow-insecure-localhost
user_17647120

IE 11 was giving me that error to get rid of that, I've added this parameter :

disableHostCheck: true

to my backend's conf.js file

user_89195490
Related