How to test an app created with Angular CLI ng serve from another device?
Solution 1
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
Solution 2
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
Solution 3
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
Solution 4
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
Carlos Mermingas
Updated on August 30, 2020Comments
-
Carlos Mermingas over 3 years
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.
- From laptop, using
-
Carlos Mermingas over 7 yearsExactly what I needed. Thank you!
-
Jim over 7 yearsthis doesn't work for me. What do you put in the address bar?
-
grotz over 7 yearsit used to work. Are you sure your issue isn't with angular-cli? I can't finish a build. It stalls at 70%.
-
Juan almost 7 yearsnever NEVER NEVEEER edit a file in node_modules manually. Those are imported libraries from external vendors..
-
Salvatore Pannozzo Capodiferro almost 7 yearsfrom localhost to 0.0.0.0 in your local enviroment it's ok
-
Juan almost 7 yearsnope, you never edit vendor files under any circunstance.
-
Salvatore Pannozzo Capodiferro almost 7 yearsI don't think so, otherwise they didn't use javascript with all the file readable
-
Salvatore Pannozzo Capodiferro almost 7 yearspeople that give me negative feedback should shame theirselves because this solution works. I used for my project and I shared, you should thanks or just put your hands down.
-
Juan almost 7 yearsIf the provided solution is wrong, negative feedback helps other people avoid it. That's why the down arrow is there for.
-
Salvatore Pannozzo Capodiferro almost 7 yearshow a solution can be wrong if it is working? next time when I find a solution I will take for me
-
Juan almost 7 yearsIt is not a solution, it is just working for you. Plus it is not the correct advice to give to anyone. It is like fixing a hole in a hose by sticking gum on it. It will work, sometimes, and only for a while... yet it is not the "solution".
-
Salvatore Pannozzo Capodiferro almost 7 yearswho decide if the solution is just for me, have you tested in every application people send to you? or is just your opinion. I describe the generic operation to do, plus what was working for me, so what's your problem?
-
Captain Whippet over 6 yearsRunning 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.
-
Ed Kolosovsky about 6 yearssolution: github.com/angular/angular-cli/issues/…
-
AndyOR over 4 yearsThank you!! Thought I would have to build and deploy to server just to test CSS changes.
-
Diego Alves almost 4 years"ng serve -host 0.0.0.0" the way to go!