Angular-cli: Access outside localhost

[ShadowManu]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Linux Ubuntu 16.04 LTS
2. 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)
3. 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
4. The log given by the failure. Normally this include a stack trace and some
   more information.
5. 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.

[ShadowManu]

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

[intellix]

Related to this PR: https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121
That comment will show you how to access the server on other devices: ng serve --host 0.0.0.0

[kylecordes]

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]

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

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]

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]

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

[ShadowManu]

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

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

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

[osvaldo-github]

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]

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

Windows

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

Linux

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

[ahmed-musallam]

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]

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]

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

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]

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

[randeepnathtr]

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

[AhammadAliPK]

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]

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]

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]

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

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

[elporfirio]

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]

run the command

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

to disable host check and access with IPAddress

[sotiris-rafail]

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]

@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

• https://github.com/angular/angular-cli/wiki/angular-workspace
• https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L907-L1028

[jyte]

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]

For mac:

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

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

[pratapgowda007]

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.

[rmalvarado1805]

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]

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

[jkatnik]

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

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

[JeffreyXieCn]

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]

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[bot]]

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