Troubleshooting network issues

There are three visible issues with the app at this state:

• The component details aren't displaying
• There are numerous console errors
• The API call is returning a 404 not found error

Begin by inspecting any network errors, since network errors usually cause knock-on effects:

1. Click on the failing URL in the Network tab
2. In the Details pane that opens to the right of the URL, click on the Preview tab
3. You should see this:

Cannot GET /api.openweathermap.org/data/2.5/weather

By just observing this error message, you will likely miss the fact that you forgot to add the http:// prefix to the URL. The bug is subtle and certainly not glaringly obvious.

1. Hover over the URL and observe the full URL, as shown:

Inspecting Network Errors

As you can see, now the bug is glaringly obvious. In this view, we get to see the full URL, and it becomes clear that the URL defined in weather.service.ts is not fully qualified, so Angular is attempting to load the resource from its parent server, hosted on localhost:5000, instead of going over the web to the right server.