[{"data":1,"prerenderedAt":876},["ShallowReactive",2],{"content-query-ikXAhobFwQ":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"layout":10,"crumb":11,"summary":12,"group":13,"order":14,"port":15,"updated":16,"cta":17,"related":25,"faq":44,"body":57,"_type":869,"_id":870,"_source":871,"_file":872,"_stem":873,"_extension":874,"sitemap":875},"/localhost/4200","localhost",false,"","localhost:4200: the Angular dev server port and how to fix it","localhost:4200 is the default port for Angular's ng serve. Fix 'refused to connect', free a busy port 4200, open it from your phone and share it publicly.","reference","localhost:4200","Angular CLI dev server (ng serve).","Web frameworks",3,4200,"2026-10-28",{"eyebrow":18,"title":19,"text":20,"to":21,"label":22,"secondaryTo":23,"secondaryLabel":24},"Webhook Relay Tunnels","Share your Angular app on a public HTTPS URL","relay connect gives localhost:4200 a stable public HTTPS URL for client demos and mobile testing. Reuse the same name and the hostname you added to allowedHosts keeps working across restarts.","/tunnels/","Explore Tunnels","/docs/tunnels/demoing-your-website/","Demo a local website",[26,29,32,35,38,41],{"title":27,"to":28},"localhost:5173 (Vite)","/localhost/5173/",{"title":30,"to":31},"localhost:3000","/localhost/3000/",{"title":33,"to":34},"localhost:8080","/localhost/8080/",{"title":36,"to":37},"127.0.0.1 and the loopback address","/localhost/127-0-0-1/",{"title":39,"to":40},"What is a tunnel?","/glossary/tunnel/",{"title":42,"to":43},"502 Bad Gateway","/http-errors/502-bad-gateway/",[45,48,51,54],{"q":46,"a":47},"What is localhost:4200?","localhost:4200 is the default port of the Angular CLI development server. Running ng serve or npm start in an Angular project builds the app and serves it with live reload at http://localhost:4200.",{"q":49,"a":50},"Why does localhost:4200 refuse to connect?","The Angular dev server is not running or has not finished building. ng serve only opens the port after the first compilation succeeds, so a build error in the terminal means nothing is listening yet.",{"q":52,"a":53},"How do I run Angular on a different port?","Pass the port flag, for example ng serve --port 4201, or set port in the serve options of angular.json so the change applies to everyone on the project.",{"q":55,"a":56},"How do I open ng serve from my phone?","Start the dev server on all interfaces with ng serve --host 0.0.0.0, then open http://YOUR-LAN-IP:4200 from a device on the same network. For access from outside your network use a tunnel and add its hostname to allowedHosts.",{"type":58,"children":59,"toc":862},"root",[60,112,119,124,229,263,269,365,371,389,471,504,525,588,594,624,661,673,679,690,725,746,815,836,856],{"type":61,"tag":62,"props":63,"children":64},"element","p",{},[65,78,80,86,88,94,96,102,104,110],{"type":61,"tag":66,"props":67,"children":68},"strong",{},[69,76],{"type":61,"tag":70,"props":71,"children":73},"code",{"className":72},[],[74],{"type":75,"value":11},"text",{"type":75,"value":77}," is the default port of the Angular CLI dev server.",{"type":75,"value":79}," Running ",{"type":61,"tag":70,"props":81,"children":83},{"className":82},[],[84],{"type":75,"value":85},"ng serve",{"type":75,"value":87}," (or ",{"type":61,"tag":70,"props":89,"children":91},{"className":90},[],[92],{"type":75,"value":93},"npm start",{"type":75,"value":95}," in a new Angular project) compiles the app and serves it with live reload at ",{"type":61,"tag":70,"props":97,"children":99},{"className":98},[],[100],{"type":75,"value":101},"http://localhost:4200",{"type":75,"value":103},". If the browser shows ",{"type":61,"tag":70,"props":105,"children":107},{"className":106},[],[108],{"type":75,"value":109},"ERR_CONNECTION_REFUSED",{"type":75,"value":111},", the dev server isn't running yet or the build failed.",{"type":61,"tag":113,"props":114,"children":116},"h2",{"id":115},"what-runs-on-port-4200",[117],{"type":75,"value":118},"What runs on port 4200",{"type":61,"tag":62,"props":120,"children":121},{},[122],{"type":75,"value":123},"Almost always Angular:",{"type":61,"tag":125,"props":126,"children":127},"table",{},[128,152],{"type":61,"tag":129,"props":130,"children":131},"thead",{},[132],{"type":61,"tag":133,"props":134,"children":135},"tr",{},[136,142,147],{"type":61,"tag":137,"props":138,"children":139},"th",{},[140],{"type":75,"value":141},"Tool",{"type":61,"tag":137,"props":143,"children":144},{},[145],{"type":75,"value":146},"Command",{"type":61,"tag":137,"props":148,"children":149},{},[150],{"type":75,"value":151},"Notes",{"type":61,"tag":153,"props":154,"children":155},"tbody",{},[156,185,207],{"type":61,"tag":133,"props":157,"children":158},{},[159,165,180],{"type":61,"tag":160,"props":161,"children":162},"td",{},[163],{"type":75,"value":164},"Angular CLI",{"type":61,"tag":160,"props":166,"children":167},{},[168,173,175],{"type":61,"tag":70,"props":169,"children":171},{"className":170},[],[172],{"type":75,"value":85},{"type":75,"value":174}," / ",{"type":61,"tag":70,"props":176,"children":178},{"className":177},[],[179],{"type":75,"value":93},{"type":61,"tag":160,"props":181,"children":182},{},[183],{"type":75,"value":184},"Default 4200",{"type":61,"tag":133,"props":186,"children":187},{},[188,193,202],{"type":61,"tag":160,"props":189,"children":190},{},[191],{"type":75,"value":192},"Nx Angular apps",{"type":61,"tag":160,"props":194,"children":195},{},[196],{"type":61,"tag":70,"props":197,"children":199},{"className":198},[],[200],{"type":75,"value":201},"nx serve my-app",{"type":61,"tag":160,"props":203,"children":204},{},[205],{"type":75,"value":206},"Uses the same Angular dev server",{"type":61,"tag":133,"props":208,"children":209},{},[210,215,224],{"type":61,"tag":160,"props":211,"children":212},{},[213],{"type":75,"value":214},"Ionic with Angular",{"type":61,"tag":160,"props":216,"children":217},{},[218],{"type":61,"tag":70,"props":219,"children":221},{"className":220},[],[222],{"type":75,"value":223},"ionic serve",{"type":61,"tag":160,"props":225,"children":226},{},[227],{"type":75,"value":228},"Defaults to 8100, not 4200",{"type":61,"tag":62,"props":230,"children":231},{},[232,234,243,245,254,256,261],{"type":75,"value":233},"React and Next.js projects use ",{"type":61,"tag":235,"props":236,"children":237},"a",{"href":31},[238],{"type":61,"tag":70,"props":239,"children":241},{"className":240},[],[242],{"type":75,"value":30},{"type":75,"value":244}," and Vite projects use ",{"type":61,"tag":235,"props":246,"children":247},{"href":28},[248],{"type":61,"tag":70,"props":249,"children":251},{"className":250},[],[252],{"type":75,"value":253},"localhost:5173",{"type":75,"value":255},". Recent Angular versions use Vite and esbuild under the hood, but ",{"type":61,"tag":70,"props":257,"children":259},{"className":258},[],[260],{"type":75,"value":85},{"type":75,"value":262}," still defaults to 4200.",{"type":61,"tag":113,"props":264,"children":266},{"id":265},"fix-localhost4200-refused-to-connect",[267],{"type":75,"value":268},"Fix \"localhost:4200 refused to connect\"",{"type":61,"tag":270,"props":271,"children":272},"ol",{},[273,307,317,327],{"type":61,"tag":274,"props":275,"children":276},"li",{},[277,282,284,289,291,297,299,305],{"type":61,"tag":66,"props":278,"children":279},{},[280],{"type":75,"value":281},"Wait for the first build.",{"type":75,"value":283}," ",{"type":61,"tag":70,"props":285,"children":287},{"className":286},[],[288],{"type":75,"value":85},{"type":75,"value":290}," opens the port only after compilation. Watch for the ",{"type":61,"tag":70,"props":292,"children":294},{"className":293},[],[295],{"type":75,"value":296},"Local: http://localhost:4200/",{"type":75,"value":298}," line, or for ",{"type":61,"tag":70,"props":300,"children":302},{"className":301},[],[303],{"type":75,"value":304},"Application bundle generation complete",{"type":75,"value":306},".",{"type":61,"tag":274,"props":308,"children":309},{},[310,315],{"type":61,"tag":66,"props":311,"children":312},{},[313],{"type":75,"value":314},"Read the build error.",{"type":75,"value":316}," A TypeScript or template error stops the build, and nothing listens until you fix it.",{"type":61,"tag":274,"props":318,"children":319},{},[320,325],{"type":61,"tag":66,"props":321,"children":322},{},[323],{"type":75,"value":324},"Check the port.",{"type":75,"value":326}," If 4200 was busy, the CLI asks whether to use another port. Accepting means the app is on a different port, often 4201 or a random one.",{"type":61,"tag":274,"props":328,"children":329},{},[330,335,336,341,343,348,350,356,358,364],{"type":61,"tag":66,"props":331,"children":332},{},[333],{"type":75,"value":334},"Docker or a VM?",{"type":75,"value":283},{"type":61,"tag":70,"props":337,"children":339},{"className":338},[],[340],{"type":75,"value":85},{"type":75,"value":342}," binds to ",{"type":61,"tag":70,"props":344,"children":346},{"className":345},[],[347],{"type":75,"value":5},{"type":75,"value":349}," by default. Inside a container you need ",{"type":61,"tag":70,"props":351,"children":353},{"className":352},[],[354],{"type":75,"value":355},"ng serve --host 0.0.0.0",{"type":75,"value":357}," and ",{"type":61,"tag":70,"props":359,"children":361},{"className":360},[],[362],{"type":75,"value":363},"-p 4200:4200",{"type":75,"value":306},{"type":61,"tag":113,"props":366,"children":368},{"id":367},"find-and-free-a-busy-port-4200",[369],{"type":75,"value":370},"Find and free a busy port 4200",{"type":61,"tag":62,"props":372,"children":373},{},[374,380,382,387],{"type":61,"tag":70,"props":375,"children":377},{"className":376},[],[378],{"type":75,"value":379},"Port 4200 is already in use. Use '--port' to specify a different port.",{"type":75,"value":381}," usually means another ",{"type":61,"tag":70,"props":383,"children":385},{"className":384},[],[386],{"type":75,"value":85},{"type":75,"value":388}," is still running in a forgotten terminal.",{"type":61,"tag":390,"props":391,"children":395},"pre",{"className":392,"code":393,"language":394,"meta":7,"style":7},"language-bash shiki shiki-themes github-dark","# macOS / Linux\nlsof -i :4200\nkill -9 $(lsof -ti :4200)\n","bash",[396],{"type":61,"tag":70,"props":397,"children":398},{"__ignoreMap":7},[399,411,433],{"type":61,"tag":400,"props":401,"children":404},"span",{"class":402,"line":403},"line",1,[405],{"type":61,"tag":400,"props":406,"children":408},{"style":407},"--shiki-default:#6A737D",[409],{"type":75,"value":410},"# macOS / Linux\n",{"type":61,"tag":400,"props":412,"children":414},{"class":402,"line":413},2,[415,421,427],{"type":61,"tag":400,"props":416,"children":418},{"style":417},"--shiki-default:#B392F0",[419],{"type":75,"value":420},"lsof",{"type":61,"tag":400,"props":422,"children":424},{"style":423},"--shiki-default:#79B8FF",[425],{"type":75,"value":426}," -i",{"type":61,"tag":400,"props":428,"children":430},{"style":429},"--shiki-default:#9ECBFF",[431],{"type":75,"value":432}," :4200\n",{"type":61,"tag":400,"props":434,"children":435},{"class":402,"line":14},[436,441,446,452,456,461,466],{"type":61,"tag":400,"props":437,"children":438},{"style":423},[439],{"type":75,"value":440},"kill",{"type":61,"tag":400,"props":442,"children":443},{"style":423},[444],{"type":75,"value":445}," -9",{"type":61,"tag":400,"props":447,"children":449},{"style":448},"--shiki-default:#E1E4E8",[450],{"type":75,"value":451}," $(",{"type":61,"tag":400,"props":453,"children":454},{"style":417},[455],{"type":75,"value":420},{"type":61,"tag":400,"props":457,"children":458},{"style":423},[459],{"type":75,"value":460}," -ti",{"type":61,"tag":400,"props":462,"children":463},{"style":429},[464],{"type":75,"value":465}," :4200",{"type":61,"tag":400,"props":467,"children":468},{"style":448},[469],{"type":75,"value":470},")\n",{"type":61,"tag":390,"props":472,"children":476},{"className":473,"code":474,"language":475,"meta":7,"style":7},"language-powershell shiki shiki-themes github-dark","# Windows\nnetstat -ano | findstr :4200\ntaskkill /PID \u003Cpid> /F\n","powershell",[477],{"type":61,"tag":70,"props":478,"children":479},{"__ignoreMap":7},[480,488,496],{"type":61,"tag":400,"props":481,"children":482},{"class":402,"line":403},[483],{"type":61,"tag":400,"props":484,"children":485},{},[486],{"type":75,"value":487},"# Windows\n",{"type":61,"tag":400,"props":489,"children":490},{"class":402,"line":413},[491],{"type":61,"tag":400,"props":492,"children":493},{},[494],{"type":75,"value":495},"netstat -ano | findstr :4200\n",{"type":61,"tag":400,"props":497,"children":498},{"class":402,"line":14},[499],{"type":61,"tag":400,"props":500,"children":501},{},[502],{"type":75,"value":503},"taskkill /PID \u003Cpid> /F\n",{"type":61,"tag":62,"props":505,"children":506},{},[507,509,515,517,523],{"type":75,"value":508},"To change the port for one run, use ",{"type":61,"tag":70,"props":510,"children":512},{"className":511},[],[513],{"type":75,"value":514},"ng serve --port 4201",{"type":75,"value":516},". To change it for the whole team, set it in ",{"type":61,"tag":70,"props":518,"children":520},{"className":519},[],[521],{"type":75,"value":522},"angular.json",{"type":75,"value":524},":",{"type":61,"tag":390,"props":526,"children":530},{"className":527,"code":528,"language":529,"meta":7,"style":7},"language-json shiki shiki-themes github-dark","\"serve\": {\n  \"options\": { \"port\": 4201 }\n}\n","json",[531],{"type":61,"tag":70,"props":532,"children":533},{"__ignoreMap":7},[534,547,580],{"type":61,"tag":400,"props":535,"children":536},{"class":402,"line":403},[537,542],{"type":61,"tag":400,"props":538,"children":539},{"style":429},[540],{"type":75,"value":541},"\"serve\"",{"type":61,"tag":400,"props":543,"children":544},{"style":448},[545],{"type":75,"value":546},": {\n",{"type":61,"tag":400,"props":548,"children":549},{"class":402,"line":413},[550,555,560,565,570,575],{"type":61,"tag":400,"props":551,"children":552},{"style":423},[553],{"type":75,"value":554},"  \"options\"",{"type":61,"tag":400,"props":556,"children":557},{"style":448},[558],{"type":75,"value":559},": { ",{"type":61,"tag":400,"props":561,"children":562},{"style":423},[563],{"type":75,"value":564},"\"port\"",{"type":61,"tag":400,"props":566,"children":567},{"style":448},[568],{"type":75,"value":569},": ",{"type":61,"tag":400,"props":571,"children":572},{"style":423},[573],{"type":75,"value":574},"4201",{"type":61,"tag":400,"props":576,"children":577},{"style":448},[578],{"type":75,"value":579}," }\n",{"type":61,"tag":400,"props":581,"children":582},{"class":402,"line":14},[583],{"type":61,"tag":400,"props":584,"children":585},{"style":448},[586],{"type":75,"value":587},"}\n",{"type":61,"tag":113,"props":589,"children":591},{"id":590},"open-localhost4200-from-another-device",[592],{"type":75,"value":593},"Open localhost:4200 from another device",{"type":61,"tag":390,"props":595,"children":597},{"className":392,"code":596,"language":394,"meta":7,"style":7},"ng serve --host 0.0.0.0\n",[598],{"type":61,"tag":70,"props":599,"children":600},{"__ignoreMap":7},[601],{"type":61,"tag":400,"props":602,"children":603},{"class":402,"line":403},[604,609,614,619],{"type":61,"tag":400,"props":605,"children":606},{"style":417},[607],{"type":75,"value":608},"ng",{"type":61,"tag":400,"props":610,"children":611},{"style":429},[612],{"type":75,"value":613}," serve",{"type":61,"tag":400,"props":615,"children":616},{"style":423},[617],{"type":75,"value":618}," --host",{"type":61,"tag":400,"props":620,"children":621},{"style":423},[622],{"type":75,"value":623}," 0.0.0.0\n",{"type":61,"tag":62,"props":625,"children":626},{},[627,629,635,637,643,645,651,653,659],{"type":75,"value":628},"Then open ",{"type":61,"tag":70,"props":630,"children":632},{"className":631},[],[633],{"type":75,"value":634},"http://YOUR-LAN-IP:4200",{"type":75,"value":636}," from your phone on the same Wi-Fi (find the IP with ",{"type":61,"tag":70,"props":638,"children":640},{"className":639},[],[641],{"type":75,"value":642},"ipconfig getifaddr en0",{"type":75,"value":644}," on macOS, ",{"type":61,"tag":70,"props":646,"children":648},{"className":647},[],[649],{"type":75,"value":650},"hostname -I",{"type":75,"value":652}," on Linux or ",{"type":61,"tag":70,"props":654,"children":656},{"className":655},[],[657],{"type":75,"value":658},"ipconfig",{"type":75,"value":660}," on Windows). The CLI prints a warning that binding to all interfaces is insecure; that's expected for local testing on a trusted network.",{"type":61,"tag":62,"props":662,"children":663},{},[664,666,671],{"type":75,"value":665},"If the device gets ",{"type":61,"tag":66,"props":667,"children":668},{},[669],{"type":75,"value":670},"\"Invalid Host header\"",{"type":75,"value":672}," or a blocked-host response, the dev server is rejecting the hostname in the request. That's the same protection you'll hit with a tunnel, covered below.",{"type":61,"tag":113,"props":674,"children":676},{"id":675},"share-localhost4200-publicly",[677],{"type":75,"value":678},"Share localhost:4200 publicly",{"type":61,"tag":62,"props":680,"children":681},{},[682,684,689],{"type":75,"value":683},"Run a tunnel next to ",{"type":61,"tag":70,"props":685,"children":687},{"className":686},[],[688],{"type":75,"value":85},{"type":75,"value":524},{"type":61,"tag":390,"props":691,"children":693},{"className":392,"code":692,"language":394,"meta":7,"style":7},"relay connect --name my-angular-app http://localhost:4200\n",[694],{"type":61,"tag":70,"props":695,"children":696},{"__ignoreMap":7},[697],{"type":61,"tag":400,"props":698,"children":699},{"class":402,"line":403},[700,705,710,715,720],{"type":61,"tag":400,"props":701,"children":702},{"style":417},[703],{"type":75,"value":704},"relay",{"type":61,"tag":400,"props":706,"children":707},{"style":429},[708],{"type":75,"value":709}," connect",{"type":61,"tag":400,"props":711,"children":712},{"style":423},[713],{"type":75,"value":714}," --name",{"type":61,"tag":400,"props":716,"children":717},{"style":429},[718],{"type":75,"value":719}," my-angular-app",{"type":61,"tag":400,"props":721,"children":722},{"style":429},[723],{"type":75,"value":724}," http://localhost:4200\n",{"type":61,"tag":62,"props":726,"children":727},{},[728,730,736,738,744],{"type":75,"value":729},"The ",{"type":61,"tag":235,"props":731,"children":733},{"href":732},"/docs/installation/cli/",[734],{"type":75,"value":735},"relay CLI",{"type":75,"value":737}," prints a public HTTPS URL that forwards to port 4200. The Angular dev server checks the ",{"type":61,"tag":70,"props":739,"children":741},{"className":740},[],[742],{"type":75,"value":743},"Host",{"type":75,"value":745}," header and only accepts hostnames it knows, so allow the tunnel's hostname:",{"type":61,"tag":390,"props":747,"children":749},{"className":527,"code":748,"language":529,"meta":7,"style":7},"\"serve\": {\n  \"options\": {\n    \"allowedHosts\": [\"\u003Chostname relay connect printed>\"]\n  }\n}\n",[750],{"type":61,"tag":70,"props":751,"children":752},{"__ignoreMap":7},[753,764,775,798,807],{"type":61,"tag":400,"props":754,"children":755},{"class":402,"line":403},[756,760],{"type":61,"tag":400,"props":757,"children":758},{"style":429},[759],{"type":75,"value":541},{"type":61,"tag":400,"props":761,"children":762},{"style":448},[763],{"type":75,"value":546},{"type":61,"tag":400,"props":765,"children":766},{"class":402,"line":413},[767,771],{"type":61,"tag":400,"props":768,"children":769},{"style":423},[770],{"type":75,"value":554},{"type":61,"tag":400,"props":772,"children":773},{"style":448},[774],{"type":75,"value":546},{"type":61,"tag":400,"props":776,"children":777},{"class":402,"line":14},[778,783,788,793],{"type":61,"tag":400,"props":779,"children":780},{"style":423},[781],{"type":75,"value":782},"    \"allowedHosts\"",{"type":61,"tag":400,"props":784,"children":785},{"style":448},[786],{"type":75,"value":787},": [",{"type":61,"tag":400,"props":789,"children":790},{"style":429},[791],{"type":75,"value":792},"\"\u003Chostname relay connect printed>\"",{"type":61,"tag":400,"props":794,"children":795},{"style":448},[796],{"type":75,"value":797},"]\n",{"type":61,"tag":400,"props":799,"children":801},{"class":402,"line":800},4,[802],{"type":61,"tag":400,"props":803,"children":804},{"style":448},[805],{"type":75,"value":806},"  }\n",{"type":61,"tag":400,"props":808,"children":810},{"class":402,"line":809},5,[811],{"type":61,"tag":400,"props":812,"children":813},{"style":448},[814],{"type":75,"value":587},{"type":61,"tag":62,"props":816,"children":817},{},[818,820,826,828,834],{"type":75,"value":819},"Older webpack-based Angular builders also accept ",{"type":61,"tag":70,"props":821,"children":823},{"className":822},[],[824],{"type":75,"value":825},"ng serve --disable-host-check",{"type":75,"value":827},", which turns the check off completely; prefer listing the one hostname. Keeping the same ",{"type":61,"tag":70,"props":829,"children":831},{"className":830},[],[832],{"type":75,"value":833},"--name",{"type":75,"value":835}," means the URL, and therefore the allowed host, stays the same across restarts.",{"type":61,"tag":62,"props":837,"children":838},{},[839,841,847,849,855],{"type":75,"value":840},"Angular itself never receives webhooks; your API does. If the app talks to a local backend that needs Stripe or GitHub webhooks, forward those to the backend port with ",{"type":61,"tag":70,"props":842,"children":844},{"className":843},[],[845],{"type":75,"value":846},"relay forward",{"type":75,"value":848}," as described in ",{"type":61,"tag":235,"props":850,"children":852},{"href":851},"/docs/webhooks/internal/localhost/",[853],{"type":75,"value":854},"receive webhooks on localhost",{"type":75,"value":306},{"type":61,"tag":857,"props":858,"children":859},"style",{},[860],{"type":75,"value":861},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":14,"depth":14,"links":863},[864,865,866,867,868],{"id":115,"depth":413,"text":118},{"id":265,"depth":413,"text":268},{"id":367,"depth":413,"text":370},{"id":590,"depth":413,"text":593},{"id":675,"depth":413,"text":678},"markdown","content:localhost:4200.md","content","localhost/4200.md","localhost/4200","md",{"loc":4},1793199808918]