CODEWITHSUNDEEP
angulartypescriptng-build
Tonyukuk
Tonyukuk

Reputation: 6195

How to allow access outside localhost

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.

Upvotes: 403

Views: 489339

Answers (19)

mast3rd3mon
mast3rd3mon

Reputation: 8825

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.

Upvotes: 719

Consule
Consule

Reputation: 1239

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/

Upvotes: 23

Víctor Gil
Víctor Gil

Reputation: 923

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

Upvotes: 12

otsili
otsili

Reputation: 79

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

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

Upvotes: 6

Partho
Partho

Reputation: 2715

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)

Upvotes: 1

Farzad
Farzad

Reputation: 409

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"
    },
...

Upvotes: 24

Jithin U. Ahmed
Jithin U. Ahmed

Reputation: 1801

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

Upvotes: -1

Nanda Kishore Allu
Nanda Kishore Allu

Reputation: 554

  • 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/ **.

Upvotes: 0

Adiii
Adiii

Reputation: 59946

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"]

Upvotes: 6

Palla
Palla

Reputation: 1262

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

Upvotes: 101

Yonas
Yonas

Reputation: 1

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.

Upvotes: -1

Gaurav Srivastava
Gaurav Srivastava

Reputation: 11

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

Upvotes: -1

Vikash Kumar
Vikash Kumar

Reputation: 1216

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.

Upvotes: 5

TSR
TSR

Reputation: 20416

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

Upvotes: 18

Irshad
Irshad

Reputation: 508

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

Upvotes: 29

Tonyukuk
Tonyukuk

Reputation: 6195

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

Upvotes: -2

Zombie
Zombie

Reputation: 404

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

Upvotes: 4

Sajad
Sajad

Reputation: 3807

Mac users:

  1. Go to System Preferences -> Network -> Wi-Fi
  2. Copy the IP address below Status (Usually 192.168.1.x)
  3. 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.

Upvotes: 68

Rakesh Ranjan
Rakesh Ranjan

Reputation: 69

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

Upvotes: 6

Related Questions