Difference between providedIn and providers array

providedIn

The providedIn property is used within the @Injectable decorator to specify where the service should be provided. This is a more modern and preferred way to provide services in Angular.

Global Scope: When you use providedIn: 'root', the service is registered with the root injector, making it a singleton and available throughout the entire application.

?

1 2 3 4 5 6

@Injectable({   providedIn: 'root', }) export class MyService {   constructor() { } }

Feature Module Scope: You can also specify a feature module to limit the scope of the service.

?

1 2 3 4 5 6

@Injectable({   providedIn: SomeFeatureModule, }) export class MyService {   constructor() { } }

providers Array

The providers array is used within the @NgModule or @Component decorators to register services. This method is more traditional and offers more granular control over the scope of the service.

Module Level: When you add a service to the providers array in an @NgModule, the service is available to all components declared in that module.

?

1 2 3 4

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

Component Level: When you add a service to the providers array in a component’s decorator, the service is available only to that component and its children.

?

1 2 3 4 5 6 7 8

@Component({   selector: 'app-my-component',   providers: [MyService],   template: `<p>{{ message }}</p>`, }) export class MyComponent {   constructor(private myService: MyService) { } }

Key Differences

• Scope:
  1. providedIn: 'root': Service is available application-wide.
  2. providers array: Service scope can be limited to a specific module or component.
• Singleton:
  1. providedIn: 'root': Ensures a singleton instance across the entire application.
  2. providers array: Can create multiple instances if provided at different levels (e.g., module and component).
• Tree Shaking:
  1. providedIn: Supports tree shaking, meaning unused services can be removed during the build process.
  2. providers array: Does not support tree shaking as effectively.

Conclusion

Using providedIn is generally recommended for its simplicity and efficiency, especially for services that need to be available application-wide. The providers array is useful when you need more control over the scope and lifecycle of your services.

Happy coding!! 😊