Angular-cli: Angular CLI 1.5, sockjs-node/247/wgcmpql4/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

[krishollenbeck]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 6.10.2
OS: win32 x64
Angular:
Chrome:

Repro steps.

In our environment we have a Java servlet which embeds the paths to ng serve js files within it. For example our .html file includes the following.

<script src="http://localhost:4201/inline.bundle.js"></script>
<script src="http://localhost:4201/polyfills.bundle.js"></script>
<script src="http://localhost:4201/styles.bundle.js"></script>
<script src="http://localhost:4201/vendor.bundle.js"></script>
<script src="http://localhost:4201/main.bundle.js"></script>

When running ng serve --port 4201 we now get the following errors in chrome.

sockjs.js:1679 WebSocket connection to 'ws://localhost:2069/sockjs-node/450/bwulelme/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

I have created an example here which throws the same type of error.
GET http://localhost:3000/sockjs-node/info?t=1510681393959 404 (Not Found)

In our Java environment the sever port is 2069 and in the example environment the server port is 3000. In both webpack appears to be trying to load from the server port vs the port 4201 which is defined for ng serve

The log given by the failure.

sockjs.js:1679 WebSocket connection to 'ws://localhost:2069/sockjs-node/450/bwulelme/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

Desired functionality.

• (Desired functionality.) No errors.
• The use case is having an external server load the files generated via the built in angular cli server.

Mention any other details that might be useful.

Example repo to reproduce the issue: https://github.com/krishollenbeck/angular-cli-webpack-error

A recent change in tasks\serve.js appears to be the culprit. Changing this
let clientAddress =${serveTaskOptions.ssl ? 'https' : 'http'}://0.0.0.0:0; back to let clientAddress = serverAddress; appears to fix the issue and is our current work around.

The change:
https://github.com/angular/angular-cli/pull/7508/files

[Brocco]

This seems similar to #8400

[shadesofkae]

I just ran into this as well. A workaround seems to be to set the public-host parameter:

ng serve --public-host http://localhost:4200/

[pwpatton]

@shadesofkae That worked! If using a port other than 4200 then do it like this:

serve --host some-server.com --port 4201 --public-host http://some-server.com:4201

[krishollenbeck]

@shadesofkae, Thank you, using --public-host works.

[clydin]

The CLI has been updated significantly since version 1.5.0. The current stable version is 8.3.5. If this problem is still being encountered with the current version, please consider opening a new issue with updated details.

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