Access outside localhost #1793

ShadowManu · 2016-08-22T01:51:19Z

Please provide us with the following information:

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Linux Ubuntu 16.04 LTS
Versions. Please run ng --version. If there's nothing outputted, please run
in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.11-webpack.2 (actually latest master at the time of this issue)
Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.
None in particular
The log given by the failure. Normally this include a stack trace and some
more information.
Mention any other details that might be useful.
Is there a way to access the app from ng serve (either dev or prod variants) from another LAN device? Thanks.

Thanks! We'll be in touch soon.

The text was updated successfully, but these errors were encountered:

ShadowManu · 2016-08-22T08:05:38Z

It wasn't working for me. Doesn't look like a local port/firewall issue since npm's http-server runs ok.

intellix · 2016-08-22T08:20:03Z

Related to this PR: #1475 (comment)
That comment will show you how to access the server on other devices: ng serve --host 0.0.0.0

kylecordes · 2016-08-22T11:36:15Z

I do this on each new CLI project, to make ng serve listed on all interfaces every time:

echo '{ "host": "0.0.0.0"}' >.ember-cli

ShadowManu · 2016-08-22T15:07:03Z

@intellix I was thinking it was something about defining the listening interfaces. Thanks, exactly what I need and the original issue can be considered closed.

@kylecordes Even when angular-cli is based on ember-cli, can this (API) configuration be considered stable in the mid/long term?

filipesilva · 2016-08-23T15:15:52Z

Closed as the original issue is resolved.

I would not rely on long term support for .ember-cli, no. Not even sure it'll work on the latest webpack version since we replaced the dev server.

dylanh724 · 2016-12-28T13:03:14Z

For this that found this on Google, the best way to do this is to edit your package.json file and edit "start" and replace "ng serve" with @intellix amazing solution "ng serve --host 0.0.0.0". Then just start with "npm start". npm start will always be here ;D

chrillewoodz · 2017-01-31T08:31:37Z

I still can't access it even when running on 0.0.0.0 :|

ShadowManu · 2017-01-31T12:38:58Z

@chrillewoodz remember the --host part. It does work. It if doesn't its not on angular-cli part, check other suspects (routing, firewall, blah blah).

toioski · 2017-01-31T13:22:21Z

@ShadowManu it doesn't work for me too. I set up the config correctly, but I can't reach the address (host unreachable) from any of the devices in the same LAN!

ShadowManu · 2017-01-31T14:01:01Z

@toioski I (and many more) can help out on the gitter channel, so we don't dirty up the thread.

osvaldo-github · 2017-02-02T13:44:40Z

First verify your machine IP Address.
On Windows, type ipconfig in Prompt (copy IPv4).
On Mac, type ifconfig |grep inet in Terminal (copy inet).

In my case this is 192.168.0.10.
Next, type ng serve --host 192.168.0.10.
Ok, your app on air for all devices on same network.

Now only http://192.168.0.10:4200/ will work, localhost not more.

valterbarros · 2017-02-03T13:25:13Z

@osvaldo-github only for complementing your answer is possible to change your hostname looks like a DNS

Windows

Open with you favorite editor C:\Windows\System32\Drivers\Etc\hosts
Edit your hosts name:
192.168.33.10 dev (Your IP and hostname what you want)
To port 3000 access by your browser dev:3000

Linux

Open with you favorite editor /etc/hosts
Follow the step 2. and 3. off windows 👍

ahmed-musallam · 2017-03-29T19:03:04Z

Since angular cli uses webpack-dev-server, using this ng serve --host 0.0.0.0 will pass the --host option to the webpack dev server. is this correct?

shinde-prasad · 2017-08-20T07:47:16Z

I have tried all of the above but none of them worked.
Anybody who has a proper solution other than above please comment and post an issue to the angular-cli community.

** I guess, we are running dev environment (webpack-dev-server) using ng serve which logically should not be accessible to anyone else while in dev.

May help: https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a

ahmed-musallam · 2017-08-21T21:36:07Z

@shinde-prasad The issue might be an antivirus or a firewall that blocks access to the intended port. Have you tried with any other http server? lite-server? or http-server?

you can use any http server you prefer by following this wiki story

shinde-prasad · 2017-08-24T05:56:04Z

Yes you're right.
but if there is problem with webpack then what js use of it.

next problem I am facing is
on my remote server machine I am not able to compile and run my code
(angular-cli) with web pack.

filipesilva · 2017-08-31T15:10:54Z

Please see #6173 for for updates to this functionality as dictated by https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a.

randeepnathtr · 2017-10-27T11:37:50Z

anyone resolved this issue ? we are getting the same error with new webpack - https://github.com/AngularClass/angular-starter#deployment

AhammadAliPK · 2018-01-16T10:02:56Z

I have resolved the issue by adding my ip address as host in ng serve .Since then , all colleagues in my company can access the application using port.
example : I have an application running in 4200, can access the app in this way ,
100.168.5.135:4200

"start": "ng serve --sourcemap false --host=100.168.5.135",

igghera · 2018-03-17T14:30:33Z

FWIW, running ng serve --host MY_IP helped me accessing my Angular app from within a VirtualBox Windows machine for testing on IE, where all other solutions I had found on the internet had failed

taurus227 · 2018-04-07T18:57:50Z

As of at least Angular CLI 1.0 you can set these directly in .angular-cli.json underneath the defaults element:

{
  "defaults": {
    "serve": {
      "port": 4444,
      "host": "0.0.0.0"
    }
  }
}

Source

alberthendriks · 2018-05-02T10:20:46Z

@taurus227 's solution is the ONLY one that worked for me. Remember to replace "0.0.0.0" host with your ip. ng-serve kept saying:

** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200 **

or "localhost" in place of "0.0.0.0"

Now that it works, it says:

** NG Live Development Server is listening on 192.168.x.y:4200, open your browser on http://192.168.x.y:4200 **

taurus227 · 2018-05-02T13:53:04Z

Actually for me it works with 0.0.0.0. That just means any IP address.

porfidev · 2018-05-08T14:47:21Z

without use ng-cli

npm run start -- --host=0.0.0.0 --port=4500

after first -- start all parameters for ng-cli as you need it.

pallapraveen · 2018-05-09T17:50:56Z

run the command

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

to disable host check and access with IPAddress

sotiris-rafail · 2018-05-10T06:58:44Z

I wanted to ask about the new angular.json file which replaced the .angular-cli.json. I used to override the host value there, but now i can not find how to override it. Does anyone has run into the same problem? Can you suggest me a solution other than writing host as parameter?

ScottFred · 2018-05-26T15:30:24Z

@sotiris-rafail I think what you are looking for is "dev-server" which has the "host" option. It looks like "host" is not available in the "server" section of the angular.json.

References

jyte · 2018-08-17T08:38:30Z

For anyone looking on how to solve that with the new angular.json file, adding the "host": "0.0.0.0" line at the right place works for me

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

ankushthakur12 · 2018-09-11T18:23:25Z

For mac:

check the ip address of your machine with this command: ifconfig |grep inet
copy the ip address.
now type: ng serve --host

naveedkamran · 2018-09-24T15:52:06Z

I have the same issue and using npm run ng serve --host 0.0.0.0 does not allow it to be accessed on network. Though app is still accessible locally.

iampratapak · 2019-05-16T06:57:53Z

ng serve --host 0.0.0.0 is a security risk isn't it? Angular cli giving warning. I don't think we can use this for production deployment

> ng serve --host 0.0.0.0

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.
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **

and with --disableHostCheck

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.

rovertzxd · 2019-05-23T00:28:48Z

I have the same issue and using npm run ng serve --host 0.0.0.0 does not allow it to be accessed on network. Though app is still accessible locally.

@naveedkamran
if you are runing from npm you'll need to add two more hipens after ng serve.
Like this npm run ng serve -- --host=0.0.0.0

juanmendes · 2019-06-13T19:57:12Z

@pratapgowda007 You shouldn't be using ng's dev server for production, not sure what you mean

jkatnik · 2019-08-11T08:33:19Z

update to @jyte answer - solution for angular 7 changed to

{ "projects": {
    "foo-project": {
      "architect": {
        "serve": {
          "configurations": {
            "host": {
              "host": "0.0.0.0"
            }
          }}}}}}

JeffreyXieCn · 2019-08-14T15:10:21Z

update to @jyte answer - solution for angular 7 changed to

{ "projects": {
    "foo-project": {
      "architect": {
        "serve": {
          "configurations": {
            "host": {
              "host": "0.0.0.0"
            }
          }}}}}}

Doesn't work for me in Angular 8. But @jyte 's answer works for me in Angular 8.

cnbalbin · 2019-08-15T08:57:45Z

I follow all the possible solution from this page, and I can say I successfully accessed my application outside my localhost, but the problem is when I try to sign in, I cannot log in and I can't see what is the error. Is their any possible solution for this, might I missed something. by the way I am newbie here, hope you guys can support my query, thank you so much

angular-automatic-lock-bot · 2019-09-15T08:02:01Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

filipesilva closed this as completed Aug 23, 2016

celliott181 mentioned this issue Nov 10, 2016

How to run dev environment on azure VM? #3101

Closed

kosmas58 mentioned this issue Jan 31, 2018

Cannot install the front-end on the back-end debian server, instructions unclear LINCnil/pia#64

Closed

shyam-leanswift mentioned this issue Jul 15, 2019

odin serve doesn't work outside localhost infor-cloud/m3-h5-sdk#5

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2019

Access outside localhost #1793

Access outside localhost #1793

Comments

ShadowManu commented Aug 22, 2016

Please provide us with the following information:

ShadowManu commented Aug 22, 2016

intellix commented Aug 22, 2016 • edited Loading

kylecordes commented Aug 22, 2016

ShadowManu commented Aug 22, 2016

filipesilva commented Aug 23, 2016

dylanh724 commented Dec 28, 2016

chrillewoodz commented Jan 31, 2017

ShadowManu commented Jan 31, 2017

toioski commented Jan 31, 2017 • edited Loading

ShadowManu commented Jan 31, 2017

osvaldo-github commented Feb 2, 2017

valterbarros commented Feb 3, 2017

Windows

Linux

ahmed-musallam commented Mar 29, 2017

shinde-prasad commented Aug 20, 2017 • edited Loading

ahmed-musallam commented Aug 21, 2017

shinde-prasad commented Aug 24, 2017

filipesilva commented Aug 31, 2017

randeepnathtr commented Oct 27, 2017

AhammadAliPK commented Jan 16, 2018

igghera commented Mar 17, 2018

taurus227 commented Apr 7, 2018

alberthendriks commented May 2, 2018 • edited Loading

taurus227 commented May 2, 2018

porfidev commented May 8, 2018

pallapraveen commented May 9, 2018

sotiris-rafail commented May 10, 2018

ScottFred commented May 26, 2018

jyte commented Aug 17, 2018

ankushthakur12 commented Sep 11, 2018

naveedkamran commented Sep 24, 2018

iampratapak commented May 16, 2019

rovertzxd commented May 23, 2019

juanmendes commented Jun 13, 2019 • edited Loading

jkatnik commented Aug 11, 2019

JeffreyXieCn commented Aug 14, 2019

cnbalbin commented Aug 15, 2019

angular-automatic-lock-bot bot commented Sep 15, 2019

intellix commented Aug 22, 2016 •

edited

Loading

toioski commented Jan 31, 2017 •

edited

Loading

shinde-prasad commented Aug 20, 2017 •

edited

Loading

alberthendriks commented May 2, 2018 •

edited

Loading

juanmendes commented Jun 13, 2019 •

edited

Loading