how to access localhost:4200 (Angular App) on Big Sur from another computer within the same lan? – Angular

Photo of author
Written By M Ibrahim
angular bertlanguagemodel firewall linksys macos-big-sur

Quick Fix: Utilize ‘ng serve –host 0.0.0.0’ command to enable the Angular app to listen to all available network interfaces, including Ethernet and Wi-Fi, allowing access from other computers on the same LAN.

The Problem:

You have a LAN setup with a Linksys EA6200 router. The server computer running Big Sur 11.4 with IP address 192.168.1.149 is hosting an Angular application on localhost:4200. You can ping the server computer from the client computer. However, when you try to access the Angular application by typing http://192.168.1.149:4200 in the client’s browser, it says the site cannot be reached. The Big Sur firewall is turned off. You want to know what else needs to be done to make the application accessible from the client computer, and if any configurations need to be made in the Linksys port forwarding policy.

The Solutions:

Solution 1: Configure Angular Application to Listen on All Interfaces

The issue you are facing is related to Angular’s default behavior of listening only on the local interface (127.0.0.1). To make your Angular application accessible from other devices on the same LAN, you need to configure it to listen on all available interfaces.

To do this, follow these steps:

  1. Open a terminal window on the server computer.
  2. Navigate to the directory where your Angular application is located.
  3. Run the following command to start the application:
ng serve --host 0.0.0.0

By specifying the --host flag with the value 0.0.0.0, you are instructing Angular to listen on all available interfaces, including the Ethernet and Wi-Fi interfaces.

Once you have done this, you should be able to access the Angular application from the client computer by typing http://192.168.1.149:4200 into the browser.