Quick Fix: To resolve this issue, modify the host and port using the following command:
ng serve --host 0.0.0.0 --port 5000
This command specifies the host as ‘0.0.0.0’ and the port as ‘5000’. Adjust the port number as needed.
The Problem:
User is unable to access their Angular application running on localhost:4200. The ‘ng serve’ command is running successfully, but the application is not loading in the browser. The message ‘This site can’t be reached’ is displayed instead.
The Solutions:
Solution 1: Tweak Host and Port
Modify the host and port used for your Angular application with the ng serve command:
ng serve --host 0.0.0.0 --port 5000
This changes the application’s host to 0.0.0.0 (all IPv4 addresses) and the port to 5000. By using 0.0.0.0 as the host, you allow the application to be accessible from all network interfaces on your computer. Setting a different port, such as 5000, can help avoid conflicts with other services that may be using the default port (4200).
Solution 2: ng serve command not working
Instead of opening your Angular application URL with **http://localhost:4200**, try opening it with **http://0.0.0.0:4200** using the ng serve command.
Solution 3: Restore Default Settings
If none of the other solutions work, it’s possible that your Windows Update has messed up your settings. To fix this, try restoring your default settings. This can be done by going to the Control Panel, then clicking on “Network and Internet.” Then, click on “Internet Options” and then go to the “Advanced” tab. Finally, click on the “Restore Default Settings” button. Once you’ve done this, restart your computer and try accessing your Angular app again.
Solution 4: Copy URL Error
If you copy the URL “http://localhost:4200” using “Ctrl” + “C” and then paste it into the browser, you may encounter the “Site cannot be reached” error. To resolve this, execute the “ng serve” command again and reload the browser without copying the URL.
Solution 5: Check Chrome’s HSTS Policy
If you’re using Chrome and encountering an “ERR_SSL_PROTOCOL_ERROR,” the issue may lie within Chrome’s HTTPS Strict Transport Security (HSTS) policy. This policy forces HTTP requests to redirect to HTTPS.
To verify this:
1. Open Chrome in incognito mode.
2. If the application runs successfully, the issue lies with Chrome’s HSTS policy.
To reset the policy:
1. Visit “chrome://net-internal/#hsts” in Chrome’s address bar.
2. Locate the domain causing the issue and remove it from the policy.
Alternatively, as a temporary solution, you can use Chrome’s incognito mode to bypass this issue.
