How to Provide Service at Module Level in Angular

To provide a service at the module level in Angular, add the service class to the providers array of the module's @NgModule decorator. This makes the service available to all components, directives, and other injectables within that module.

Syntax

In Angular, you provide a service at the module level by listing it in the providers array inside the @NgModule decorator. This tells Angular to create one instance of the service for the entire module.

• @NgModule: Decorator that defines an Angular module.
• providers: Array where you list services to be available in the module.
• Service class: The class that contains the logic you want to share.

typescript

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

@NgModule({
  imports: [CommonModule],
  providers: [MyService],
  declarations: [],
  exports: []
})
export class MyModule { }

Example

This example shows how to provide a simple logging service at the module level. The service is added to the providers array of LoggingModule. Any component inside this module can inject and use the service.

typescript

import { NgModule, Injectable, Component } from '@angular/core';

@Injectable()
export class LoggingService {
  log(message: string) {
    console.log('Log:', message);
  }
}

@Component({
  selector: 'app-logger',
  template: `<button (click)="logMessage()">Log Message</button>`
})
export class LoggerComponent {
  constructor(private loggingService: LoggingService) {}

  logMessage() {
    this.loggingService.log('Button clicked!');
  }
}

@NgModule({
  declarations: [LoggerComponent],
  providers: [LoggingService],
  exports: [LoggerComponent]
})
export class LoggingModule { }

Output

When the button is clicked, the console shows: Log: Button clicked!

Common Pitfalls

Common mistakes when providing services at the module level include:

• Not adding the service to the providers array, so Angular does not create an instance.
• Providing the service in multiple modules unintentionally, causing multiple instances.
• Using providedIn: 'root' in the service decorator and also providing it in a module, which can cause confusion about scope.

Always decide if the service should be singleton app-wide (providedIn: 'root') or scoped to a module (providers array).

typescript

/* Wrong: Service not provided in module or root */
@Injectable()
export class DataService { }

/* Right: Provided in module providers array */
@NgModule({
  providers: [DataService]
})
export class DataModule { }

Quick Reference

Tips for providing services at module level:

• Use providers array in @NgModule to scope service to that module.
• One instance per module is created, shared by all components in that module.
• Do not mix providedIn: 'root' and module providers for the same service.
• Use module-level providers to limit service scope and improve lazy loading behavior.

Key Takeaways

Add your service class to the module's providers array inside @NgModule to provide it at module level.

Module-level providers create one instance shared by all components in that module.

Avoid providing the same service both in root and module providers to prevent multiple instances.

Use module-level service provision to scope services and optimize lazy loading.

Always import the module where the service is provided to use the service in components.