Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"[WDS] Disconnected!" error on new Angular 6 project #11060

Closed
Jawan81 opened this issue May 29, 2018 · 31 comments · Fixed by #13417
Closed

"[WDS] Disconnected!" error on new Angular 6 project #11060

Jawan81 opened this issue May 29, 2018 · 31 comments · Fixed by #13417

Comments

@Jawan81
Copy link

@Jawan81 Jawan81 commented May 29, 2018

After upgrading my Angular 5.2 app to 6.0 the connection to the Webpack Dev Server could not be established anymore ("[WDS] Disconnected!"). I then verified that the same problem occurs on a newly created project as well.

Versions

Angular CLI: 6.0.5
Node: 8.9.1
OS: linux ia32
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Ubuntu 16.04 Vagrant VM running under Windows 10.
Port 4200 is forwarded in the Vagrantfile:
config.vm.network "forwarded_port", guest: 4200, host: 4200

Repro steps

  • Step 1: ng new blabla in the VM
  • Step 2: ng serve --host 0.0.0.0 --port 4200 --disable-host-check
  • Step 3: Open http://<ip-of-my-vm>:4200 in the host's browser (Firefox and Chrome tested)
  • Step 4: The page loads successfully, but [WDS] Disconnected! appears in the browser's console

Observed behavior

As similar [WDS] problems seem to have struggled a lot of people in the past I tried to follow their advices but never found something to solve it.
To narrow down the error I created a new project to see if the error persists - and it does.

When I follow the above steps the [WDS] Disconnected! error occurs and live updates don't work.
I have stepped through what is happening before that error and noticed that SockJS cannot establish a connection because all its 'transport' mechanism return 'disabled'.
For example in SockJS's sockjs-client/lib/transport/websocket.js you find this:

...
WebsocketDriver = require('./driver/websocket'); // should include faye-websocket
...
WebSocketTransport.enabled = function() {
  return !!WebsocketDriver; // will return false
};

But WebsocketDriver is undefined although Websockets are supported by the browsers I use (FF 60, Chrome 66).
The other transport mechanisms of SockJS also return false when enabled is requested on them so SockJS has no valid transport mechanism left and closes the connection before any request has been made which then causes the output of [WDS] Disconnected!.

Desired behavior

As I had no problems with the dev server in my setup when using Angular 4 or 5 I would have expected the ng serve command to still work the way it has.
But something must have changed in either the webpack dev server, SockJS, faye-websocket or the angular cli that now makes this error pop up. I unfortunately couldn't find out what.

Mention any other details that might be useful (optional)

I also tried out if there's a difference when using nginx as a reverse proxy instead of using the VM's forwarded port, but there isn't...

fyi: For the Angular 5.2 project I used the same version of node

@Refreshkt

This comment has been minimized.

Copy link

@Refreshkt Refreshkt commented Jun 9, 2018

Me acabo de encontrar con el mismo error en un proyecto recien creado con Angular 6, no entiendo muy bien lo de wds disconected!, pero he buscado por google y wds hace referencia a "Wireless Distribution System". yo suelo tener problemas con la conexión wifi, pequeños cortes de conexion, no creo que este sea el problema, pero he comprobado otra cosa, cuando cargo la página por primera vez no aparece el error, este aparece cuando refreco la página con F5, abriendo una nueva ventana y accediendo a la página de nuevo el error no aparece, pero vuelve a aparecer cuando refresco la página. Esperemos que no tenga importancia el error y que alguien experimentado en Angular nos despeje esta duda. un saludo

I just found with the same error in a project just created with Angular 6, I do not understand very well the wds disconected !, but I searched for google and wds refers to "Wireless Distribution System." I usually have problems with the Wi-Fi, small connection cuts, I do not think this is the problem, but I have checked something else, when I load the page for the first time the error does not appear, it appears when I refrigate the page with F5, opening a new window and accessing the page again the error does not appear, but it reappears when I refresh the page. Hopefully it does not matter the error and that someone experienced in Angular will clear this doubt. a greeting

@anRoswell

This comment has been minimized.

Copy link

@anRoswell anRoswell commented Jun 18, 2018

Buenos dias, reporto el mismo problema con Angular 6

Este error me aparece cuando declaro

"<h1 [ngStyle]="{ 'background': colorHex() }">
Welcome to {{ title }}!

"

Quito el [ngStyle] y no aparece error, no se a q se deba esto.

[WDS] Disconnected! vendor.js:133520:5
Constructor works! app.component.ts:16:4
ERROR Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'background: #6fa73c'. Current value: 'background: #62624'."
viewDebugErrorhttp://localhost:4200/vendor.js:58905:15expressionChangedAfterItHasBeenCheckedErrorhttp://localhost:4200/vendor.js:58893:12checkBindingNoChangeshttp://localhost:4200/vendor.js:58995:15checkNoChangesNodeInlinehttp://localhost:4200/vendor.js:61853:9checkNoChangesNodehttp://localhost:4200/vendor.js:61842:9debugCheckNoChangesNodehttp://localhost:4200/vendor.js:62445:5debugCheckDirectivesFnhttp://localhost:4200/vendor.js:62373:13View_AppComponent_0ng:///AppModule/AppComponent.ngfactory.js:52:25debugUpdateDirectiveshttp://localhost:4200/vendor.js:62362:12checkNoChangesViewhttp://localhost:4200/vendor.js:61741:5callViewActionhttp://localhost:4200/vendor.js:61980:21execComponentViewsActionhttp://localhost:4200/vendor.js:61942:13checkNoChangesViewhttp://localhost:4200/vendor.js:61744:5callWithDebugContexthttp://localhost:4200/vendor.js:62652:22debugCheckNoChangesViewhttp://localhost:4200/vendor.js:62333:12checkNoChangeshttp://localhost:4200/vendor.js:60154:55tickhttp://localhost:4200/vendor.js:56037:62tickhttp://localhost:4200/vendor.js:56037:17_loadComponenthttp://localhost:4200/vendor.js:56069:9bootstraphttp://localhost:4200/vendor.js:56011:9_moduleDoBootstraphttp://localhost:4200/vendor.js:55811:74_moduleDoBootstraphttp://localhost:4200/vendor.js:55811:13bootstrapModuleFactoryhttp://localhost:4200/vendor.js:55778:21invokehttp://localhost:4200/polyfills.js:2710:17onInvokehttp://localhost:4200/vendor.js:55277:24invokehttp://localhost:4200/polyfills.js:2709:17runhttp://localhost:4200/polyfills.js:2460:24scheduleResolveOrRejecthttp://localhost:4200/polyfills.js:3194:29invokeTaskhttp://localhost:4200/polyfills.js:2743:17onInvokeTaskhttp://localhost:4200/vendor.js:55268:24invokeTaskhttp://localhost:4200/polyfills.js:2742:17runTaskhttp://localhost:4200/polyfills.js:2510:28drainMicroTaskQueuehttp://localhost:4200/polyfills.js:2917:25 AppComponent.html:3:2
View_AppComponent_0
AppComponent.html:3:2
proxyClass
compiler.js:10058
./node_modules/@angular/core/fesm5/core.js/DebugContext_.prototype.logError
core.js:11008
./node_modules/@angular/core/fesm5/core.js/ErrorHandler.prototype.handleError
core.js:1591
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<
core.js:4436:54
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.runOutsideAngular
core.js:3630
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick
core.js:4436
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype._loadComponent
core.js:4463
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.bootstrap
core.js:4405
./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype._moduleDoBootstrap/<
core.js:4205:65
./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype._moduleDoBootstrap
core.js:4205
./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype.bootstrapModuleFactory/</</<
core.js:4172
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
onInvoke
core.js:3671
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:387
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
scheduleResolveOrReject/<
zone.js:872
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:421
onInvokeTask
core.js:3662
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask
zone.js:188
drainMicroTaskQueue
zone.j

@antonevane

This comment has been minimized.

Copy link

@antonevane antonevane commented Jul 23, 2018

Angular CLI 6.1.X moved back to webpack 4.6.0.
4.6.0 [SOLVED] reloading issue
"devDependencies": { ..... "webpack": "4.6.0" }

UPD:
Unfortunaty doesn;t always work.
Clean run without hot replacement does work.

@ImpulseKomal

This comment has been minimized.

Copy link

@ImpulseKomal ImpulseKomal commented Jul 25, 2018

Hello,

I am getting this error .
[WDS] Disconnected!
close
onclose
EventTarget.dispatchEvent
(anonymous)
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask push../node_modules/zone.js/dist/zone.js.Zone.runTask
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask
ZoneTask.invoke
timer
setTimeout (async)
scheduleTask
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask
scheduleMacroTaskWithCurrentZone
(anonymous)
proto.(anonymous function)
SockJS._close
SockJS._transportMessage
EventEmitter.emit
WebSocketTransport.ws.onmessage
wrapFn
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
push../node_modules/zone.js/dist/zone.js.Zone.runTask
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask
invokeTask
globalZoneAwareCallback

Angular: 6.0.8
Angular-cli: 6.0.8

@Mathis001

This comment has been minimized.

Copy link

@Mathis001 Mathis001 commented Aug 22, 2018

Receive similar [WDS] Disconnected! message on page refreshes only. Navigating to the page directly does not create the message, nor does any router view changes.

[WDS] Disconnected! vendor.js:142188:5
	close http://127.0.0.1:4200/vendor.js:142188:5
	onclose socket.js:17
	./node_modules/sockjs-client/dist/sockjs.js/</<[5]</EventTarget.prototype.dispatchEvent sockjs.js:170
	./node_modules/sockjs-client/dist/sockjs.js/</<[14]</</SockJS.prototype._close/< sockjs.js:965
	./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask zone.js:421
	./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask zone.js:188
	./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask zone.js:496
	ZoneTask/this.invoke zone.js:485
	timer zone.js:2054
@prad9

This comment has been minimized.

Copy link

@prad9 prad9 commented Aug 28, 2018

Firefox : 61.0.2
Angular: 6
Getting same error even visiting the page for first time

[WDS] Disconnected! vendor.js:162537:5
close
http://localhost:4200/vendor.js:162537:5 onclose socket.js:17
./node_modules/sockjs-client/dist/sockjs.js/</<[5]</EventTarget.prototype.dispatchEventsockjs.js:170
./node_modules/sockjs-client/dist/sockjs.js/</<[14]</</SockJS.prototype._close/<sockjs.js:969
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTaskzone.js:421
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTaskzone.js:188
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTaskzone.js:496
ZoneTask/this.invokezone.js:485
timerzone.js:2054

@chadalen

This comment has been minimized.

Copy link

@chadalen chadalen commented Aug 31, 2018

Getting the same issue https://i.imgur.com/qRFtCPe.png

@angular angular deleted a comment from pradeeppalwikaad Sep 27, 2018
@WellspringCS

This comment has been minimized.

Copy link

@WellspringCS WellspringCS commented Oct 3, 2018

I'm seeing same behavior. It's brought me to a grinding halt.

@KOCHEGAR

This comment has been minimized.

Copy link

@KOCHEGAR KOCHEGAR commented Oct 3, 2018

Got the same error. But! I don't know why and how, after disabling wi-fi i have running ng serve and auto-reloading got worked. Error still appear in console(in firefox, but not in chrome), but auto-reloading is working without problems(and after enabling wi-fi and rerun ng serve it's still working).

@WellspringCS

This comment has been minimized.

Copy link

@WellspringCS WellspringCS commented Oct 4, 2018

I found a solution for my situation and posted about it here: webpack/webpack-dev-server#851

@filipesilva

This comment has been minimized.

Copy link
Member

@filipesilva filipesilva commented Oct 9, 2018

Hi all, I'm trying to gather some more information about this issue but finding it hard to reproduce on the latest CLI. Can someone give me reproduction steps? Preferably that don't need VMs, as that complicates the setup.

@ngbot ngbot bot added this to the Backlog milestone Oct 9, 2018
@WellspringCS

This comment has been minimized.

Copy link

@WellspringCS WellspringCS commented Oct 10, 2018

@filipesilva I could send you project, which isn't ginormous, but I found that the symptoms only began after a certain level of complexity was reached. (Could yet turn out to be a bug or wrong step on my part, but that's how it played out for me...) Let me know if you would like to proceed. This week is rough, but I could send it to you next week.

@filipesilva

This comment has been minimized.

Copy link
Member

@filipesilva filipesilva commented Oct 10, 2018

@WellspringCS I'm game, let me know when suits.

@guiramos

This comment has been minimized.

Copy link

@guiramos guiramos commented Nov 19, 2018

Any update on this?

@WellspringCS

This comment has been minimized.

Copy link

@WellspringCS WellspringCS commented Nov 21, 2018

To my shame, I've not followed through. @filipesilva I confess I don't know how to send you the code privately. What's the typical route by which this is done? I'm not too adept with github yet.

@polypus74

This comment has been minimized.

Copy link

@polypus74 polypus74 commented Nov 29, 2018

Just learning angular here so can't make an in depth comment or have any idea what it means. I'm getting this running the first few steps of the heroes app tutorial, i.e. it is close to a clean new project. When I ng serve it, there is no error until the first refresh, either manually in the browser or via a code change. I'm running

Angular CLI: 7.1.0
Node: 10.14.1
OS: linux x64 (an up to date arch linux)

Package Version

@angular-devkit/architect 0.11.0
@angular-devkit/core 7.1.0
@angular-devkit/schematics 7.1.0
@schematics/angular 7.1.0
@schematics/update 0.11.0
rxjs 6.3.3
typescript 3.1.6

@MichFe

This comment has been minimized.

Copy link

@MichFe MichFe commented Dec 22, 2018

Hi!,
did anyone could found out why the:

-Invalid Host/Origin header
-[WDS] Disconnected!

Error loop is happening, it showed up in a project I started, so I tested with a brand new project and it show up on ng serve.

@MichFe

This comment has been minimized.

Copy link

@MichFe MichFe commented Dec 22, 2018

For anyone who is having the same issue with the"webpack-dev-server":

imagen

A loop of Invalid Host/Origin header -> [WDS] Disconnected! errors.

I found that in the webpack-dev-server release 3.1.11 they added a check for the origin websocket connection, the problem is that when you make the call from a same origin connection browsers do not add an origin to the headers so the validation always failed.

For a quick fix you can edit the "Server.js" file in the webpack-dev-server>lib>Server.js path:
line 735:
(-) if (!this.checkHost(connection.headers) || !this.checkHost(connection.headers, 'origin')) {
(+) if (!this.checkHost(connection.headers)) {

Or you can add a validation that triggers only when the 'origin' property is present in the headers object.

I hope this may be helpful for someone that face the same issue.
MF

@jostschmithals

This comment has been minimized.

Copy link

@jostschmithals jostschmithals commented Dec 23, 2018

Since yesterday several students in our Angular courses (and I myself) suddenly faced this issue.
But in these cases it seems to work with ng serve --disable-host-check as a temporary workaround.

hansl added a commit to hansl/angular-cli that referenced this issue Jan 11, 2019
The warning points to a solution for the WDS disconnect issue. Using --disable-host-check
will additionally warn the user that this might be insecure.

Fixes angular#11060
@shehand

This comment has been minimized.

Copy link

@shehand shehand commented Jan 14, 2019

same issue in Angular 7.2.0

screenshot from 2019-01-14 17-13-39

@hansl

This comment has been minimized.

Copy link
Contributor

@hansl hansl commented Jan 14, 2019

This is a configuration issue and will not be fixed. You can use --disable-host-check to fix it, but it will open your computer to any access from any other computer. Maybe it's okay for you, maybe not.

The proper way to fix this is to implement a reverse proxy to your development server, which requires a lot more than what ng serve was meant to do. My solution is to print a warning when using this.

kyliau added a commit that referenced this issue Jan 14, 2019
The warning points to a solution for the WDS disconnect issue. Using --disable-host-check
will additionally warn the user that this might be insecure.

Fixes #11060
kyliau added a commit that referenced this issue Jan 14, 2019
The warning points to a solution for the WDS disconnect issue. Using --disable-host-check
will additionally warn the user that this might be insecure.

Fixes #11060
@jostschmithals

This comment has been minimized.

Copy link

@jostschmithals jostschmithals commented Jan 14, 2019

The Invalid Host/Origin Header problem I reported above (same like in @MichFe's screenshot) had suddenly appeared for us on 2018/12/22 (for different developers independently, after having created new projects with ng new ...).
But some days later the problem disappeared just as suddenly. This was not related to the Angular CLI version. Projects which were created in those days are now working fine as well for us - without the mentioned workaround -, after deleting node_modules, package-lock.json and running npm i.

@fredrik-macrobond

This comment has been minimized.

Copy link

@fredrik-macrobond fredrik-macrobond commented Jan 18, 2019

In angular.json, add the following under architect -> serve -> options:
"disableHostCheck": true

@chowdam

This comment has been minimized.

Copy link

@chowdam chowdam commented Jan 22, 2019

issue resolved after adding below in polyfills.ts file:
import 'core-js/es7/object';
import 'core-js/es7/array';

@cfremgen

This comment has been minimized.

Copy link

@cfremgen cfremgen commented Mar 5, 2019

I have set "disableHostCheck": true.

Still getting this error, constantly. If I change tabs in Chrome and let the tab load in the background, it works fine.

I can also temporarily resolve it by killing the dev server and restarting npm start.

@xshiiiidev

This comment has been minimized.

Copy link

@xshiiiidev xshiiiidev commented Mar 14, 2019

received this error too "[WDS] Disconnected!" on firefox. It's ok when the page is loaded for the first time but, if I reload or refresh the page this error appears. Anyway to fix this ? Already tried the fixes above nothing works.

Angular CLI: 7.3.5
Node: 8.10.0
OS: linux x64
Angular:
...

Package Version

@angular-devkit/architect 0.13.5
@angular-devkit/core 7.3.5
@angular-devkit/schematics 7.3.5
@schematics/angular 7.3.5
@schematics/update 0.13.5
rxjs 6.3.3
typescript 3.2.4

@chan-dev

This comment has been minimized.

Copy link

@chan-dev chan-dev commented Apr 2, 2019

any update on this one, it seems to only appear on initial load and if i reload the page the error disappears.

@himanshujoshi15

This comment has been minimized.

Copy link

@himanshujoshi15 himanshujoshi15 commented Apr 4, 2019

I had the same issue after upgrading to Angular 6.0. I found that my inastalled zone.js version was 9.0. I downgraded to ^0.8.26 and it worked.

@xshiiiidev

This comment has been minimized.

Copy link

@xshiiiidev xshiiiidev commented Apr 8, 2019

I had the same issue after upgrading to Angular 6.0. I found that my inastalled zone.js version was 9.0. I downgraded to ^0.8.26 and it worked.

I tried this downgrade fix but didn't worked for me using Angular 7.3.7.

Opened a new thread for this because the TS here Closed this thread.

#13915

Follow the link above for the others who's facing this problem too. It's still open as of now.

@cazadorv

This comment has been minimized.

Copy link

@cazadorv cazadorv commented Apr 29, 2019

el mismo error, al iniciar no aparece.. despues de refrescar la pagina si

[WDS] Disconnected! client:177
close (index):177
onclose socket.js:17
dispatchEvent sockjs.js:170
_close sockjs.js:969
invokeTask zone.js:423
runTask zone.js:195
invokeTask zone.js:498
invoke zone.js:487
timer zone.js:2281

@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 9, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.