Angularjs – How to get ng serve to work with host name on a VirtualBox Docker set up

angular-cliangularjsdockervirtualboxwindows

My set up:

Windows 10 running virtual box with Ubuntu 16.04 running a docker container with @angular/CLI: 1.1.3
node: 6.11.0
from which ng serve is called to run an angular 4 application

On my windows machine hosts file, I have host name local.angular pointing to Vbox's 192.168.56.101 and my network setting for virtual box is 'host-only adaptor'

When running ng serve it states
NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200

however on my browser localhost:4200 does not access docker's localhost

I've tried ng serve –host 0.0.0.0 and other solutions, none of which work

Best Answer

Got this working by configuring angular.cli.json "default" config by adding "host": "[ip address]" where ip address is what the 'localhost' for your docker container is.

This would normally be 127.0.0.1 however the docker container's localhost with the default 'bridge' network is 172.17.0.2 seen via the docker inspect [container-id] command or from within the container ifconfig (apt-get net-tools on ubuntu) now with ng serve and opening the browser at 172.17.0.2:4200 displays invalid host header. Adding flag --disable-host-check like "ng server --disable-host-check" displays the page