¿Cómo probar una aplicación creada con Angular CLI ng serve desde otro dispositivo?


Tengo una aplicación generada con Angular CLI desde cero. Versión CLI angular-cli: 1.0.0-beta.11-webpack.2

Estoy tratando de probarlo desde mi teléfono inteligente, pero obtengo Conexión rechazada.

Entonces, corro ng serve en mi computadora portátil e intento acceder a la aplicación:

  • Desde laptop, usando localhost: Works
  • Desde laptop, usando IP: Conexión rechazada
  • Desde smartphone, usando IP: Conexión rechazada

Esto solía funcionar con la versión anterior de SystemJS de CLI. Comprobé que no tengo un cortafuegos funcionando.

¿Cómo puedo corregir o depurar este error?

Estoy usando un Mac.

Author: Carlos Mermingas, 2016-08-22

5 answers

Agregar el host-flag con el valor "0.0.0.0" debería permitirle acceder al servidor web desde cualquier dispositivo de su red local.

Esto debería funcionar: ng serve --host 0.0.0.0

Para una explicación: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121

 46
Author: grotz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-22 06:54:41

En el paquete.json

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

Sin embargo --disable-host-check sería un riesgo para la seguridad y usted necesitará "@angular/cli": "^1.1.0-rc.2" como esta bandera apareció en la versión 1.1

 7
Author: bravik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-31 09:33:36

Siguiendo los consejos de esta página: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a, esto funcionó para mí:

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

 2
Author: Captain Whippet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-05 11:47:04

Tal vez esto puede ser útil (una versión un poco automatizada de la respuesta de @Captain Whippet):

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.']));

Paquete.json:

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

Luego ejecute "npm start"

A continuación, puede abrir su aplicación en cualquier dispositivo de su red local a través de la dirección impresa en amarillo.

@ angular / cli: 1.3.2, nodo: 6.9.5

Probado en Mac y Windows

 2
Author: RUKAclMortality,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-30 07:43:46

Debe encontrar en la carpeta node_modules angular cli todas las ocurrencias de localhost y reemplazar (uno en particular, dependiendo de su versión angular-cli) con 0.0.0.0.

Luego en paquete.json put ng serve host host 0.0.0.0

En mi caso el archivo es commands/serve.js

 -2
Author: Nather Webber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-30 13:18:06