How to allow access outside localhost

Question

How can I allow access outside the localhost at Angular2? I can navigate at localhost:3030/panel easily but I can not navigate when I write my IP such as 10.123.14.12:3030/panel/.

Could you please allow me how to fix it? I am not using npm (node project manage - node install/node start ) to install and run the project.

If you want, I can provide my package.json and index.html.

I tired ng serve and it says " I have to be inside an angular--cli project in ordre to use the serve command". — Tonyukuk, Apr 19 '17 at 10:07

score 577 · Accepted Answer · edited Jul 23 '21 at 05:49

577

Using ng serve --host 0.0.0.0 will allow you to connect to the ng serve using your ip instead of localhost.

EDIT

In newer versions of the cli, you have to provide your local ip address instead

EDIT 2

In newer versions of the cli (I think v5 and up) you can use 0.0.0.0 as the ip again to host it for anyone on your network to talk to.

As a side note Make sure your connection is set to Public in your OS settings.

edited Jul 23 '21 at 05:49

Nicu

3,206
4
19
40

answered Apr 19 '17 at 10:01

mast3rd3mon

7,312
2
21
45

1

it says "you have to be inside an angluar--cli project in order to use the serve command " with the red warning when i write ng sreve and also a yellow message which indicated that i am running version 6.2.2 of Node, which will not be supported in future versions of the CLI after writing ng serve – Tonyukuk Apr 19 '17 at 10:07
1

first, try updating node, second, try restarting your terminal/vscode – mast3rd3mon Apr 19 '17 at 10:09
1

I updated it from package json to 6.0.46 as "@types/node": "6.0.46", but still get the same message – Tonyukuk Apr 19 '17 at 10:16
1

I do not understand how people give - vote to my questions and I do not know who do it. Even you understand the question wrong and give me wrong answers they still give "-" reputation. I found the answer myself. I was supposed to add ""server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"," to packagejson – Tonyukuk Apr 20 '17 at 08:41
i understand the question exactly as you asked it, adding `--host 0.0.0.0` will do what you are asking for – mast3rd3mon Apr 20 '17 at 08:42
Please accept my answer as the correct answer so other people can find it if they have the same problem – mast3rd3mon Apr 20 '17 at 09:09
On angular-cli 1.4.4 (webpack-dev-server 2.7.1) using `--host 0.0.0.0` causes the `'[WDS] Disconnected!'` error message. WDS websocket tries to connect to localhost, instead of the provided IP, and naturally fails to connect. Using real dev server IP instead of 0.0.0.0 as the --host argument works fine. – Alex Che Oct 05 '17 at 06:21
@AlexChe That is because it was changed on a version of the cli. At the time of answering, `0.0.0.0` was the correct answer – mast3rd3mon Oct 05 '17 at 07:52
it works with ng serve --host 'ip adress' but when I try the name of the machine instead it doesn't work. example : 192..x.x.x:4200 works but myMachine:4200 doesn't. Any idea please ? – John Feb 15 '18 at 13:00
@John as far as i know, its for ip addresses/localhost only, not computer names – mast3rd3mon Feb 15 '18 at 13:08
1

`ng serve --host 0.0.0.0` works fine for me. I didn't have to use the specific IP – Andrew Jun 13 '18 at 21:14
@Andrew yeah, i think at some point they change it again so you can use `0.0.0.0` but im not sure which version changes it. i think it was the angular 5 cli maybe but without testing, i cant be certain – mast3rd3mon Jun 14 '18 at 08:06
you should only have to turn the firewall off if you are trying to access the server from outside your network, and in that case, you should set up ports instead – mast3rd3mon Feb 28 '19 at 16:09
28

This worked for me: `ng serve --open --host 0.0.0.0 --disable-host-check` – Jonathan.Brink May 28 '19 at 17:37
I've tried this but not working for me I've also added ```--disable-host-check``` still. This is my full command: ```ng serve --host 0.0.0.0 --disable-host-check --proxy-config proxy.conf.json``` – Avishek Jul 17 '20 at 08:22
@Avishek it could be your proxy interfering perhaps? what version of angular and angular cli are you using? – mast3rd3mon Jul 17 '20 at 09:46
@mast3rd3mon am using Angular 9 with CLI version 9.1.0 – Avishek Jul 17 '20 at 10:31
problem is when I am running my app (without build) in my system the app is working perfectly with proxy but after build this issue is occuring – Avishek Jul 17 '20 at 10:32
@mast3rd3mon you refer to my issue here: https://stackoverflow.com/questions/62950609/angular-access-local-host-xxx-xxx-xxx-xxx/62951120?noredirect=1#comment111323822_62951120 – Avishek Jul 17 '20 at 10:34
1

@Jonathan.Brink Thanks. perfect. – Hoàng Huỳnh Nhật Dec 03 '21 at 09:25

score 60 · Answer 2 · edited Jul 07 '20 at 00:11

60

run command

ng serve --host=0.0.0.0 --disable-host-check

this will disable host check and allow to access from outside(instead of localhost) with IP address

edited Jul 07 '20 at 00:11

Adiii

44,267
6
120
114

answered May 09 '18 at 17:42

Palla

792
6
11

4

I didn't need --disable-host-check. `ng serve --host 0.0.0.0` works fine for me. What is the host check supposed to do? – Andrew Jun 13 '18 at 21:17
5

I for once needed the `disabled-host-check` otherwise I got the message "Invalid Host header" – GameDroids Mar 27 '19 at 14:17
is there a way to define it in a config file to avoid mentioning it everytime? – Ayush Kumar Jun 05 '19 at 07:59
@AyushKumar you can just define it in you package.json like `{ "scripts": { "start": "ng serve --host=0.0.0.0 --disable-host-check" } }` – stuhops Mar 24 '22 at 17:57
Excellent works for me. – prathameshk73 Apr 20 '22 at 09:16

Sajad · Answer 3 · 2018-09-12T10:08:52.900

58

Mac users:

Go to System Preferences -> Network -> Wi-Fi
Copy the IP address below Status (Usually 192.168.1.x)
Paste it in your ng serve like: ng serve --host 192.168.1.x

Then you must be able to see your page on other devices through 192.168.1.x:4200.

edited Sep 12 '18 at 10:08

answered Oct 08 '17 at 23:30

Sajad

2,456
3
16
22

1

Used to work for me and not working anymore. Wondering why. I feel like I've tried everything! My firewall is disabled. ng serve --host 10.x.x.x --disable-host-check / ng serve --host 0.0.0.0 --disable-host-check -> Not accessible from a Windows remote machine which is on the same network with 10.x.x.x:4200 – Rafaël Moser Jul 03 '19 at 09:16
Works well in Angular 7, and MacOS 10.14.6 – bks Aug 20 '19 at 10:32
For what it's worth, the accepted answer is working for me on MacOS as of October 2019. – Alexander Nied Oct 07 '19 at 18:53
This works for me, and after searching far and wide, it is the only answer I've seen to specify this key step: in the address bar of your iphone safari browser, plug in: 192.168.1.x:4200 , where x = final digits of your ip address. Including the ":4200" was the difference for me. – 9gt53wS Oct 31 '19 at 17:04
@RafaëlMoser did you solve it ? I have the same issue and I'm cluless really. – Maaddy May 27 '20 at 14:40

score 23 · Answer 4 · answered Jun 10 '19 at 13:50

23

You can use the following command to access with your ip.

ng serve --host 0.0.0.0 --disable-host-check

If you are using npm and want to avoid running the command every time, we can add the following line to the package.json file in the scripts section.

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

Then you can run you app using the below command to be accessed from the other system in the same network.

npm start

answered Jun 10 '19 at 13:50

Irshad

417
4
6

5

It's now -disableHostCheck=true|false in my version, Angular 8. – Tony Jun 21 '19 at 10:03
this is working if you are not using ng serve – Hasitha Dec 08 '21 at 08:33

score 18 · Answer 5 · edited Oct 19 '21 at 16:18

18

I just edit angular.json file in my project as below and it works

...

    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "project:build",
      "host": "0.0.0.0"
    },
...

edited Oct 19 '21 at 16:18

rhavelka

2,166
2
19
35

answered Feb 25 '19 at 17:23

Farzad

239
4
5

score 9 · Answer 6 · answered Jul 20 '19 at 03:42

9

For the problem was Firewall. If you are on Windows, make sure node is allowed through

answered Jul 20 '19 at 03:42

TSR

12,583
19
64
146

I was not able to access from the same network even after served with ng serve --host 0.0.0.0 . But firewall permission was the issue as you mentioned. Thanks for taking to time to share this one. – Sandy B Feb 24 '20 at 08:49

score 9 · Answer 7 · edited Feb 09 '22 at 15:19

9

No package.json is necessary to change.

For me it works using:

ng serve --host=0.0.0.0 --port=5999 --disable-host-check

Host: http://localhost:5999/

edited Feb 09 '22 at 15:19

vinzee

17,022
14
42
60

answered Jun 16 '20 at 15:10

Consule

640
8
11

score 7 · Answer 8 · answered Jul 07 '20 at 00:36

If you facing same problem inside Docker, then you can use below CMD in Dockerfile.

CMD ["ng", "serve", "--host", "0.0.0.0"]

Or complete Dockerfile

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

score 6 · Answer 9 · answered May 18 '18 at 06:52

6

Open cmd and navigate to project location i.e. where you run npm install or ng serve for the project.

and then run the command - ng serve --host 10.202.32.45 where 10.202.32.45 is your IP address.

You will be able to access your page at 10.202.32.45:4200 where 4200 is your port number.

Note: If you serve your app using this command then you won't be able to access localhost:4200

answered May 18 '18 at 06:52

Rakesh Ranjan

69
1
5

Is it possible to access both way? – zishan paya Jan 03 '19 at 06:59
it works thanks..i guess i was looking at wrong ip address – Tejashri Patange Mar 25 '19 at 15:32
know it sounds silly, but make sure your phone is using the same wifi network as you dev machine. I was using a guest network... +1 for the only answer that worked for me. – greg Jun 12 '19 at 23:02

score 5 · Answer 10 · edited Feb 18 '20 at 07:00

5

A quick solution that might help someone :

Add this line as value for start ng serve --host 0.0.0.0 --disable-host-check in your package.json

ex:

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

And then simply do start or npm run start

you will be able to access your project from other local IPs.

edited Feb 18 '20 at 07:00

U12-Forward

65,118
12
70
89

answered Feb 18 '20 at 06:59

Vikash Kumar

906
9
9

score 5 · Answer 11 · answered Dec 23 '21 at 18:43

ng serve --host 0.0.0.0 will allow you to connect to the ng serve using your ip instead of localhost.

Open your browser to <IP-ADDRESS>:4200
Using ng serve --host 0.0.0.0 --disable-host-check will allow you to connect to the ng serve using your domain instead of localhost.

Open your browser to <DOMAIN-NAME>:4200

Zombie · Answer 12 · 2019-04-03T09:12:30.127

3

you can also introspect all HTTP traffic running over your tunnels using ngrok , then you can expose using ngrok http --host-header=rewrite 4200

edited Apr 03 '19 at 09:12

answered Apr 03 '19 at 06:17

Zombie

349
11
18

score 3 · Answer 13 · edited Feb 09 '22 at 15:19

3

In Angular version 11 (and maybe some earlier versions) --public-host option does the trick for me, for example:

$ ng serve --host 0.0.0.0 --public-host app.mypublicdomain.com

edited Feb 09 '22 at 15:19

vinzee

17,022
14
42
60

answered Apr 18 '21 at 21:55

Víctor Gil

608
6
8

score 2 · Answer 14 · answered Nov 19 '21 at 09:06

2

Using ng serve --host 0.0.0.0 command has solved my issue. Use 192.168.x.x:5200 to get access to the app from another machine.

Also, check for firewall rules on client and server (disable firewall temporally or create a rule to allow traffic)

answered Nov 19 '21 at 09:06

Partho

1,099
1
11
19

Nanda Kishore Allu · Answer 15 · 2020-07-07T08:46:06.673

0

Use ng serve --host<Your IP> --port<Required if any>.
ng serve --host=192.111.1.11 --port=4545.
You can now see the below line at the end of compilation.

Angular Live Development Server is listening on 192.111.1.11:4545, open your browser on http://192.111.1.11:4545/ **.

edited Jul 07 '20 at 08:46

answered Jun 30 '20 at 07:13

Nanda Kishore Allu

474
3
6

score 0 · Answer 16 · answered Sep 04 '21 at 05:44

0

ng serve --open --host 0.0.0.0 --disable-host-check

This worked for me perfectly (even using a public IP with an A host pointed to that IP).

answered Sep 04 '21 at 05:44

Jithin U. Ahmed

1,255
1
15
29

score -1 · Answer 17 · edited May 25 '20 at 06:21

-1

Create proxy.conf.json and paste this configuration

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

Replace:

let url = 'api/'+ your path;

Run from CLI:

ng serve  --host port.number —-proxy-config proxy.conf.json

edited May 25 '20 at 06:21

double-beep

4,567
13
30
40

answered May 25 '20 at 05:58

Gaurav Srivastava

11
1

score -1 · Answer 18 · answered Jun 15 '20 at 10:14

for me it works using "ng serve --open --host 0.0.0.0" but there is a warning

WARNING: This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or computer. Using a different host than the one passed to the "--host" flag might result in websocket connection issues. You might need to use "--disableHostCheck" if that's the case.

score -3 · Answer 19 · edited Apr 08 '19 at 17:30

-3

For the people who are using node project manager, also this line adding to package.json will be enough. For angular CLI users, mast3rd3mon's answer is true.

You can add

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

to package.json

edited Apr 08 '19 at 17:30

BossmanT

489
1
5
16

answered Apr 21 '17 at 08:29

Tonyukuk

4,895
5
34
54

How to allow access outside localhost

19 Answers19

Linked