sockjs error when using deploy-url, base-href build options

[jtal]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Node: v10.8.0
npm: 6.2.0
Chrome (desktop) Version 65.0.3325.146 (Official Build) (64-bit)
nginx/1.10.3 (Ubuntu)
Ubuntu 16.04.4 LTS

Angular CLI: 6.1.5
Node: 10.8.0
OS: linux x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/cli 6.1.5
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.3.2
typescript 2.7.2
webpack 4.9.2

Repro steps

1. Create & serve an app:
   ng new my-app
cd my-app
ng --deploy-url "/myapp/" --base-href "/myapp/" serve

2. Create a proxy for /myapp location (I'm using nginx):

location /myapp {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:4200;
}

3. Open Chrome (and dev console) and visit http://localhost/myapp

The log given by the failure

zone.js:2969 GET http://localhost/sockjs-node/info?t=1536974142006 404 (Not Found)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
AbstractXHRObject._start @ sockjs.js:1605
(anonymous) @ sockjs.js:1494
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
AbstractXHRObject @ sockjs.js:1493
XHRLocalObject @ sockjs.js:2914
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
initSocket @ socket.js:9
(anonymous) @ client:212
./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0 @ vendor.js:74366
webpack_require @ bootstrap:76
0 @ main.ts:12
webpack_require @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
client:177 [WDS] Disconnected!

Desired functionality

After setting deployUrl and baseHref, a repetitive 404 (Not Found) error is produced in the browser. Something appears to be requesting /sockjs-node/info without considering deployUrl/baseHref.

The request should be made to $deployUrl/sockjs-node/info. No 404 errors.

Use case: A user wants their website to be made of multiple projects listening on different ports behind a proxy.

Mention any other details that might be useful

I was told to report this issue here.
angular/angular#25972

[clydin]

Please note that ng serve is meant purely for development purposes and is not intended to serve applications in production environments. As such ng serve does not prevent the outlined use case as it would not be used in such a use case when serving to end-users.

With that said, ng serve will use the deploy-url and base-href options as the default for the --serve-path option. The serve path option can be used directly to inform the development server to serve the application at a specific path (e.g., / in combination with a base href setting). In addition, the --public-host option is essential in light of the proxy usage. As this option informs the live-reload client of the location it needs to connect. A list of all available options can be found here: https://github.com/angular/angular-cli/wiki/serve

[jtal]

Thank you for your help.

For the record, the command line I used to start up my dev server behind proxy was:

ng --deploy-url "/my-app/" --base-href "/my-app/" --serve-path "/my-app/" --public-host="http://localhost:4200" serve

[angular-automatic-lock-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.}