How to test an app created with Angular CLI ng serve from another device?

Question

I have an app generated with Angular CLI from scratch. CLI version angular-cli: 1.0.0-beta.11-webpack.2

I am trying to test it from my smartphone but I get Connection refused.

So, I run ng serve on my laptop and try to access the app:

From laptop, using localhost: Works
From laptop, using IP: Connection refused
From smartphone, using IP: Connection refused

This used to work with the previous, SystemJS version of CLI. I checked that I don't have a firewall running.

How could I fix or debug this error?

I am using a Mac.

score 85 · Accepted Answer · edited Nov 22 '16 at 06:54

85

Adding the host-flag with value "0.0.0.0" should allow you to access the webserver from any device on your local network.

This should work: ng serve --host 0.0.0.0

For an explanation: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

edited Nov 22 '16 at 06:54

Albert Haff

358
2
7

answered Aug 23 '16 at 13:27

grotz

976
7
3

Exactly what I needed. Thank you! – Carlos Mermingas Aug 24 '16 at 12:22
2

this doesn't work for me. What do you put in the address bar? – Jim Oct 21 '16 at 23:48
it used to work. Are you sure your issue isn't with angular-cli? I can't finish a build. It stalls at 70%. – grotz Dec 19 '16 at 12:56
3

solution: https://github.com/angular/angular-cli/issues/1793#issuecomment-276960462 – Eduard Kolosovskyi Feb 28 '18 at 10:21
Thank you!! Thought I would have to build and deploy to server just to test CSS changes. – AndyOR Aug 22 '19 at 15:24
"ng serve -host 0.0.0.0" the way to go! – Diego Alves Jul 02 '20 at 13:46

score 10 · Answer 2 · answered May 31 '17 at 09:33

10

In package.json

 "start": "ng serve --host 0.0.0.0   --port 4200 --disable-host-check ",

However --disable-host-check would be a security risk and you will need "@angular/cli": "^1.1.0-rc.2" as this flag appeared in 1.1 version

answered May 31 '17 at 09:33

bravik

433
7
17

Running with `--disable-host-check` on Angular CLI version 1.2.7 emits this error: `WARNING Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.` – Captain Whippet Aug 05 '17 at 11:43

score 2 · Answer 3 · answered Aug 05 '17 at 11:47

2

Following the advice on this page: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a, this worked for me:

ng serve --host 0.0.0.0 --host my-computer

answered Aug 05 '17 at 11:47

Captain Whippet

2,143
4
25
34

score 2 · Answer 4 · answered Aug 30 '17 at 07:43

Maybe this can be helpfull (a bit automated version of @Captain Whippet's answer):

dev-server.js:

const os = require('os');
const { spawn } = require('child_process');

function getLocalIp(ipMatchArr) {
  const networkInterfaces = os.networkInterfaces();
  let matchingIps = Object.keys(networkInterfaces).reduce((arr, name) => {
    const matchingInterface = networkInterfaces[name].find(iface =>
      iface.family === 'IPv4' && ipMatchArr.find(match => iface.address.indexOf(match) > -1));
      if (matchingInterface) arr.push(matchingInterface.address);
      return arr;
  }, []);

  if (matchingIps.length) {
    return matchingIps[0];
  }
  else {
    throw(`Error. Unable to find ip to use as public host: ipMatches=['${ipMatchArr.join("', '")}']`);
  }
}

function launchDevServer(address) {
  const port = process.env.port || 4200;
  const publicHostname = address + ":" + port;
  console.log(`[[[ Access your NG LIVE DEV server on \x1b[33m ${publicHostname} \x1b[0m ]]]`);
  spawn(
      "ng serve"
    , [
          "--host 0.0.0.0"
        , `--public ${publicHostname}`
      ]
    , { stdio: 'inherit', shell: true }
  );
}

/* execute */
launchDevServer(getLocalIp(['192.168.1.', '192.168.0.']));

package.json:

"scripts": {
    "start": "node dev-server.js"
  }

then run "npm start"

You can then open your app on any device on your local network via address printed in yellow.

@angular/cli: 1.3.2, node: 6.9.5

tested on Mac and Windows

How to test an app created with Angular CLI ng serve from another device?

4 Answers4

then run "npm start"

Linked