Providers

You'll note that the number of errors didn't go down. Instead, AppComponent and CurrentWeatherComponent are failing to be created due to a missing provider for WeatherService. So, let's add the provider for WeatherService to the spec files for both components.

1. Provide the WeatherService in the declarations in app.component.spec.ts
2. Apply the same code change in current-weather.component.spec.ts, as shown:

src/app/app.component.spec.ts
src/app/current-weather/current-weather.component.spec.ts
...
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [...],
        providers: [WeatherService],
        ...

You may wonder why AppComponent is needing a provider, since the component constructor is not injected with the WeatherService. This is happening because CurrentWeatherComponent is a hard-coded dependency of AppComponent. It is possible to decouple the two components further in two ways: one way is to inject the component dynamically using an ng-container, and the other would be to leverage Angular Router and router-outlet. The latter option is how you will be structuring the vast majority of your applications and will be covered in the later chapters, and implementing the former option to properly decouple the components is left as an exercise for the reader.