Connect Angular, NodeJS via “http://localhost:4200”

Angular is an application design framework and development platform to create efficient and sophisticated single-page apps. A lot of developers prefer Angular for their applications. During the development of the Angular applications with or without NodeJs generally, the local host is used for development and testing purposes. The http://localhost:4200 is the default URL used to access Angular applications.

“http://localhost:4200” Connection Error

During navigation or connection to the “http://localhost:4200” we may get an error like below. This error may different for different cases but we get similar errors which prevents us connection to the Angular application.

The page returned the following error: This site can’t provide a secure connection, ERR_SSL_PROTOCOL_ERROR The project is compiled successfully

Disable Local Proxy Configuration

Proxy is used to manage the network and web based configurations via a proxy server. If there is a proxy configuration in the current system it is used to connect all of the web applications. So check and disable the existing proxy configuration via Settings -> Advenced Settings -> Open Proxy Settings -> LAN Settings of your web browser. Alternatively you can add the “localhost:4200” as an exception for the proxy configuration.

Check Port Connectivity with Telnet

The Angular is served via the port number 4200 on the localhost. We can check if we can access this port and if it is running properly by using the telnet. Use telnet to check connectivity to the localhost 4200 port like below.

telnet localhost 4200

Try another Web Browser (Firefox, Microsoft Edge)

There are different web browsers in some cases they work in different ways. So try another web browser than you are currently using. Test the connectivity to the “localhost:4200” with alternative browser like Google Chrome, Mozilla Firefox, Microsoft Edge, Opera etc.

Empty Web Browser Cache

During the usage of the web browser it cache some data and web resources locally and do not update them for some time. The “localhost:4200” address may be visited previously and some resources may be chaced. This may create problems too. So clear or empty web browser cache. For Google Chrome Developer Tools -> More tools -> Developer Tools -> Refresh Button -> Empty Cache and Hard Reload .

Open Web Browser In Incognito Mode

Incognito Mode or Private Mode is used to browse web in a private way where we left less footprint about our identity. To prevent previously used data the “localhost:4200” can be opened in incognito mode in order to browse it without previous data which is similar to the emptying cache.

Allow Firewall For nodejs.exe and chrome.exe or Web Browser

The first thing to check is if the current browser is allowed to access “localhost:4200” and also the nodejs.exe can create and run service in port number 4200. For this step check your firewall configuration which may Windows Defender Firewall.

Leave a Comment