Table of Contents

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

providers illustration for: 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: "..."

};