Providers in Angular 2

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

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

  declarations: [
  imports: [
  providers: [WeatherApiService, AuthService],
  bootstrap: [AppComponent]
export class AppModule { }

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: "..."

providers: [{ provide: AuthConfig, useValue: AUTH_CONFIG }]


🔎 Searching...