Troubleshooting common Angular errors

Our unit tests and e2e tests are now working. In this section, you intentionally introduce an easy-to-make mistake so that you can become familiar with real-life errors that can be happen while developing your applications and gain a solid understanding of the tooling that makes make you an effective developer.

Let's pretend that we made an innocent mistake when copying and pasting the URL from the API documentation page on OpenWeatherMap.org and forgot to add http:// in front of it. This is an easy mistake to make:

src/app/weather/weather.service.ts
...
return this.httpClient
  .get<ICurrentWeatherData>(
    `api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${environment.appId}`
  ).pipe(map(data => this.transformToICurrentWeather(data)))
...

Your app will compile successfully, but when you inspect the results in the browser, you won't see any weather data. In fact, it seems like the CurrentWeather component is not rendering at all, as you can see in the image below:

CurrentWeather Does Not Render

To find out why, you will need to debug your Angular app.