Access outside localhost

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.

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

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

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

@intellix

@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?

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.

@intellix

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

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

@chrillewoodz

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

@ShadowManu

@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!

@toioski

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

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.

@osvaldo-github

@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 👍

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?

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

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.

run the command

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

to disable host check and access with IPAddress

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?

@sotiris-rafail

@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

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

For mac:

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

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.

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.

@naveedkamran

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

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

@jyte

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

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

@jyte

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.

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

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

Navigation Menu

Repository navigation

Access outside localhost #1793

Please provide us with the following information:

Windows

Linux

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Access outside localhost #1793

Description

Please provide us with the following information:

Activity

ShadowManu commented on Aug 22, 2016

intellix commented on Aug 22, 2016

kylecordes commented on Aug 22, 2016

ShadowManu commented on Aug 22, 2016

filipesilva commented on Aug 23, 2016

dylanh724 commented on Dec 28, 2016

chrillewoodz commented on Jan 31, 2017

ShadowManu commented on Jan 31, 2017

toioski commented on Jan 31, 2017

ShadowManu commented on Jan 31, 2017

osvaldo-github commented on Feb 2, 2017

valterbarros commented on Feb 3, 2017

Windows

Linux

ahmed-musallam commented on Mar 29, 2017

shinde-prasad commented on Aug 20, 2017

9 remaining items

porfidev commented on May 8, 2018

pallapraveen commented on May 9, 2018

sotiris-rafail commented on May 10, 2018

ScottFred commented on May 26, 2018

jyte commented on Aug 17, 2018

ankushthakur12 commented on Sep 11, 2018

naveedkamran commented on Sep 24, 2018

iampratapak commented on May 16, 2019

rovertzxd commented on May 23, 2019

juanmendes commented on Jun 13, 2019

jkatnik commented on Aug 11, 2019

JeffreyXieCn commented on Aug 14, 2019

cnbalbin commented on Aug 15, 2019

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions