Angular - Service/Injection

We can configure the DI framework in Angular in three main ways.

Module Injector @ root level
Module Injector @ platform level
Element Injector using providers meta data in Component/Directive/Pipe
Element Injector using viewProviders meta data in Component.
Null Injector

Module Injector @ root level

Module Injector enforces the service to used only inside a specific module. ProvidedIn meta data available in @Injectable has to be used to specify the module in which the service can be used.

The value should refer to the one of the registered Angular Module (decorated with @NgModule). root is a special option which refers the root module of the application. The sample code is as follows −

import { Injectable } from '@angular/core'; @Injectable({ 
   providedIn: 'root', 
})
export class DebugService { 
   constructor() { } 
}

2.Element Injector using providers

Element Injector enforces the service to be used only inside some particular component/Directive/Pipes.

3. Element Injector using viewProviders

viewProviders is similar to provider except it does not allow the service to be used inside the components content created using ng-content directive.

https://codecraft.tv/courses/angular/dependency-injection-and-providers/ngmodule-providers-vs-component-providers-vs-component-viewproviders/