¿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.
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
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
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
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
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
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