Providers in Angular

In order for a service in Angular 2+ to be properly injected, it needs to be provided to either the component, the parent module or the app module. A service provided in the app module will have the same instance provided everywhere. Here’s an example of two services provided in a component:

Component: app.component.ts

import { Component } from '@angular/core';
import { WeatherApiService } from './weather-api.service';
import { AuthService } from './auth.service';

@Component({
 ...,
 providers: [WeatherApiService, AuthService]
})
export class AppComponent {
 constructor(public weatherApi: WeatherApiService,
 public auth: AuthService) {}

And here they are provided in the module instead:

Module: app.module.ts

...

import { WeatherApiService } from './weather-api.service';
import { AuthService } from './auth.service';