How to make angular 4 live reload to point to the correct address?

Question

I have an angular 4 application which is set up in Nanobox.

On the local machine it runs on localhost:4200 on the Nanobox I run it on http://172.21.0.5:4200/ as per Nanobox suggestion.

When the application load in http://172.21.0.5:4200/ I get this error: zone.js:2933 GET http://localhost:4200/sockjs-node/info?t=1508200471270 net::ERR_CONNECTION_REFUSED

This error doesn't happen in Localhost, and because of that error my live reload is not working.

Thanks in advance.

Edit

It is dev environment. I need somehow tell angular file watcher to communicate with http://0.0.0.0:4200 or http://172.21.0.5:4200

I don't know where is the angular live reload script. I can't find anything online either. I thought it is Webpack, but I can't find anything about it.

Answer 1

As per understanding you wanted to run angular application on client machine, to do so follow 3 simple steps

1) enable prod mode-

import { enableProdMode } from '@angular/core';

// Enable production mode unless running locally
if (!/localhost/.test(document.location.host)) {
  enableProdMode();
}

2) build application in prod mode- base will be set in index.html to navigate all CSS and js files ng build prod --base="/folderName/"

3) deploy dist folder and explore.

Answer 2

After lots of digging, there is no straight answer for this.

Here is my solution with Nanobox:

Grab the IP Address that Nanobox suggests:

Then use ng serve -host 172.21.0.5 this should bypass the issue of livereload.

Also in your boxfile.yml make sure you use fs_watch: true.

Nanobox is looking at 0.0.0.0 so you need to make sure in your angular-cli.json in the default section add:

"defaults": {
    "styleExt": "scss",
    "component": {},
    "serve": {
      "port": 4200,
      "host": "0.0.0.0"
    }
  }

This should do it.