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

Class Providers

By default Angular will inject a provider with the same class name and token, but useClass allows to use a different class. For example, the following will provide a service with the Auth token, but the UserAuth class:

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

Aliased Providers

If you want to alias an old provider to be handled by a new provider, you can do so with useExisting. This would be useful if, for example, a component needs to be still be using the old provider, but the logic should still be handled by the new provider:

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

Value Providers

Most of the time classes are used as providers, but simple values can also be used instead with useValue:

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