Angular ng serve is not hosting site on localhost

html css angular angular-cli

13,812

Solution 1

To debug the issue try the following :

ng serve -o
Check the default port mentioned in config file with the key baseURL
check with ng build command (if webpack is getting generated)
ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true

if possible try to upload browser console image

Solution 2

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 the command ng serve --host 192.168.0.10 Ok, your app on air for all devices on the same network.

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

Solution 3

Consider these things :

By opening server via ng serve, it can only be opened on browsers on that device.
If you want to serve it for the devices on your network you should use ng serve -- host <your_device_ip>

Note: Device IP is the IP Address of the device you are serving from.

13,812

Zain Khan

Updated on June 04, 2022

Comments

Zain Khan almost 2 years

When I run ng serve on my CLI, I get the following output:

Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

But when I open http://localhost:4200/ in my browser so there is nothing.

Any advice on how to solve this issue?

Here's my package.json

{
  "name": "eastlaw",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

wentjun almost 5 years

Are there any errors on your console?
Zain Khan almost 5 years

it's not opening on browser so how can I check my console?
Zain Khan almost 5 years

@Shankar web page is not open on my brower when I try to open so page says "This site can’t be reached"
Sunil Kashyap almost 5 years

try with IP address once i.e. http://127.0.0.1:4200 and did you tried with ng serve -o
Zain Khan almost 5 years

@skdroid yes I tried but still not working
Sunil Kashyap almost 5 years

Okay, there are no errors in the console only you are getting "this site can't be reached" that means the "connection is refused" so you could use --host flag with your pc IPv4 address (just for testing).
Zain Khan almost 5 years

it also show same error "Angular Live Development Server is listening on localhost:4200, open your browser on localhost:4200"
Sunil Kashyap almost 5 years

no I mean to say use host flag to serve, check the answer I've explained steps

Zain Khan almost 5 years

not working same issue.. the page says "This site can’t be reached"
Sunil Kashyap almost 5 years

are you getting any error in terminal/CMD while executing ng serve, could you add your CLI output in your question.
Joel Joseph almost 5 years

@WebMaster also make sure you have specified the bootstrap component in root module and also root module to start up in main.ts
Sankeerth Mahurkar almost 5 years

Windows firewall may also be an issue, Windows firewall does prompt to you whether or not allow NodeJS access to network. Make sure you allowed access.
Sankeerth Mahurkar almost 5 years

The bootstrap component must not cause any connectivity issue
Joel Joseph almost 5 years

I know , but since he said nothing is seen on the screen . perhaps he has not pointed to angular any component to load . Since there is no error in console