Angular 6 for Enterprise-Ready Web Applications

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.

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

Inspecting ...