networking - cli - ng serve--host

¿Cómo probar una aplicación creada con el servicio de CLI Angular desde otro dispositivo?

Question

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

Estoy intentando probarlo desde mi teléfono inteligente pero se me niega la conexión .

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

• Desde el portátil, usando localhost : Works
• Desde el portátil, usando IP: Conexión rechazada.
• Desde el teléfono inteligente, usando IP: Conexión rechazada

Esto solía funcionar con la versión anterior, SystemJS de CLI. He comprobado que no tengo un cortafuegos en funcionamiento.

¿Cómo podría arreglar o depurar este error?

Estoy usando una Mac.

Answer 1

Agregar el indicador de host con el valor "0.0.0.0" debería permitirle acceder al servidor web desde cualquier dispositivo en 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

Answer 2

En package.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 necesitará "@angular/cli": "^1.1.0-rc.2" ya que esta "@angular/cli": "^1.1.0-rc.2" apareció en la versión 1.1

Answer 3

Quizás esto pueda 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 ejecuta "npm start"

Luego puede abrir su aplicación en cualquier dispositivo en su red local a través de una dirección impresa en amarillo.

@ angular / cli: 1.3.2, nodo: 6.9.5

probado en Mac y Windows

Answer 4

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

Answer 5

tienes que encontrar en la carpeta node_modules angular cli todas las ocurrencias de localhost y reemplazar (una en particular, dependiendo de tu versión de angular-cli) con 0.0.0.0.

entonces en package.json ponemos ng servicio --host 0.0.0.0

En mi caso el archivo es comandos / serve.js.