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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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