Investigating console errors

Before you fix this issue, it is worthwhile to understand the knock-on effects of the failing API call:

1. Observe the console errors:

Dev Tools Console Error Context

The first element of note here is the ERROR CONTEXT object, which has a property named DebugContext_. The DebugContext_ contains a detailed snapshot of the current state of your Angular application when the error happened. The information contained within DebugContext_ is light years ahead of the amount of mostly unhelpful error messages AngularJS generates.

Properties that have the value (...) are property getters, and you must click on them to load their details. For example, if you click on the ellipsis for componentRenderElement, it will be populated with the app-current-weather element. You can expand the element to inspect the runtime condition of the component.

1. Now scroll to the top of the console
2. Observe the first error:

ERROR TypeError: Cannot read property 'city' of undefined

You have probably encountered the TypeError before. This error is caused by trying to access the property of an object that is not defined. In this case, CurrentWeatherComponent.current is not assigned to with an object, because the http call is failing. Since current is not initialized and the template blindly tries to bind to its properties like {{current.city}}, we get a message saying property 'city' of undefined cannot be read. This is the kind of knock-on effect that can create many unpredictable side-effects in your application. You must proactively code to prevent this condition.