How to Use Providers in Angular Module: Simple Guide

In Angular, you add providers in the @NgModule decorator to register services that the module and its components can use. This makes the service available via dependency injection throughout the module or the whole app if provided in the root module.

Syntax

The providers array inside the @NgModule decorator lists the services you want Angular to create and inject. Each item is a service class or a provider object.

Example parts:

• providers: [MyService] registers MyService for injection.
• You can also use objects like { provide: TOKEN, useClass: MyService } for advanced cases.

typescript

import { NgModule } from '@angular/core';
import { MyService } from './my-service';

@NgModule({
  providers: [MyService]
})
export class MyModule {}

Example

This example shows how to provide a simple service in a module and use it in a component.

typescript

import { NgModule, Injectable, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Injectable()
export class GreetingService {
  getGreeting() {
    return 'Hello from GreetingService!';
  }
}

@Component({
  selector: 'app-root',
  template: `<h1>{{ greeting }}</h1>`
})
export class AppComponent {
  greeting: string;
  constructor(private greetingService: GreetingService) {
    this.greeting = this.greetingService.getGreeting();
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [GreetingService],
  bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Output

<h1>Hello from GreetingService!</h1>

Common Pitfalls

1. Forgetting to add the service to providers: The service won't be injectable and causes errors.

2. Providing the same service in multiple modules: This creates separate instances, which may cause unexpected behavior.

3. Using providedIn: 'root' in service instead of module providers: This is often simpler and recommended for singleton services.

typescript

/* Wrong: Service not added to providers, injection fails */
import { Injectable, Component, NgModule } from '@angular/core';

@Injectable()
export class DataService {}

@Component({
  selector: 'app',
  template: ''
})
export class AppComponent {
  constructor(private dataService: DataService) {} // Error: No provider
}

@NgModule({
  declarations: [AppComponent],
  imports: [],
  providers: [] // DataService missing here
})
export class AppModule {}

/* Right: Add service to providers */
@NgModule({
  providers: [DataService]
})
export class AppModule {}

Quick Reference

Concept	Description
providers array	List services to be injectable in the module
Service class	The class you want Angular to create and inject
provide/useClass	Advanced provider syntax for custom tokens or classes
providedIn: 'root'	Alternative to module providers for singleton services
Multiple providers	Avoid providing same service in multiple modules to prevent multiple instances

Key Takeaways

Add services to the module's providers array to make them injectable.

Providing a service in a module creates a new instance scoped to that module.

Use providedIn: 'root' in services for app-wide singletons instead of module providers.

Avoid providing the same service in multiple modules to prevent multiple instances.

Always import and declare providers correctly to avoid injection errors.