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';

providers: [{ provide: Auth, useClass: UserAuth }]

providers: [{ provide: OldService, useExisting: NewService }]

const AUTH_CONFIG = {
  apiKey: "...",
  authDomain: "..."
};