What are providers in Angular2?

angular angular2-providers
Pranjal Mittal picture Pranjal Mittal · Jun 16, 2016 · Viewed 36.6k times · Source

In the Angular2 component configuration providers is one of the keys that we could specify. How are these providers defined and what are they used for?

@Component({
  ..
  providers: [..],
  ..
})

Note:

Angular2 documentation is gradually maturing but still sparse. It currently defines providers as:

An array of dependency injection providers for services that the component requires.

This recursive definition isn't very helpful. A more detailed explanation with an example would really help.

Answer

Sasxa picture Sasxa · Jun 16, 2016

Providers are usually singleton (one instance) objects, that other objects have access to through dependency injection (DI).

If you plan to use an object multiple times, for example, the Http service in different components, you can ask for the same instance of that service (reuse it). You do that with the help of DI by providing a reference to the same object that DI creates for you.

@Component){
  ..
  providers: [Http]
}

..instead of creating new object every time:

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

This is an approximation, but that's the general idea behind Dependency Injection - let the framework handle creation and maintenance of reusable objects... Provider is Angular's term for these reusable objects (dependencies).

Related questions

Angular2 Module: How can i import a service from another module

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { ClinicFacilityService } from './apiClient.module'; @NgModule({ imports: [ CommonModule, FormsModule ], declarations: [ DailyScheduleComponent, ], providers: [ ClinicFacilityService ], exports: [ DailyScheduleComponent ], }) export class ClinicDashboardModule { } I need to …

Read More
Angular: Lazy loading modules with services

I've been following this tutorial, to understand lazy loading, and below is my inference. Scenario 1: Services are provided by putting them in the providers array of a child module Scenario 2: Services are provided in a child module using the forRoot …

Read More
Angular 2 TestBed with mocks

I am trying to test a component which uses another service. And I want to isolate the component by providing a mock for the service. Before RC5 I can simply use addproviders which is now deprecated and will be removed …

Read More