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

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

[jostschmithals]

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.

[chan-dev]

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