Angular Hierarchical Injector And Providedin Complete Guide

What are Angular Hierarchical Injectors?

Angular's dependency injection (DI) system relies on an injection hierarchy. This hierarchy consists of different injector instances:

1. Module Injector: One per @NgModule.
2. Component Injector: One per @Component.
3. Element Injector: Created at each DOM element that has directives/components applied.

When you request a service, Angular looks for it starting at the current injector, moving up through the hierarchy until it finds a match or reaches the root injector.

Using Injection Tokens and providedIn

The @Injectable() decorator marks a class as available to be provided and injected as a dependency. The providedIn option determines which injector should provide the service. It can be set to 'root', a specific module, or null.

• providedIn: 'root': The service is provided in the root injector, making it a singleton application-wide.
• providedIn: AppModule, etc.: The service is provided at the application or module level.
• providedIn: null: Default behavior; Angular requires the service to be explicitly provided in a module.

We'll walk through some examples demonstrating different scenarios:

Example 1: Providing a Service in the Root Injector

Step 1: Create a Service (app.service.ts)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // This provides the service in the root injector
})
export class AppService {
  constructor() {
    console.log('AppService created');
  }

  getMessage(): string {
    return 'Hello from AppService!';
  }
}

Step 2: Component that uses this service (app.component.ts)

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  template: `<p>{{ message }}</p>`
})
export class AppComponent {
  message: string;

  constructor(private appService: AppService) {
    this.message = this.appService.getMessage();
  }
}

Output

When the AppComponent is instantiated, the AppService will also be instantiated once in the root injector. Any other component injecting AppService will receive the same instance.

Example 2: Providing a Service in a Feature Module

Step 1: Create a Feature Module (feature.module.ts)

import { NgModule } from '@angular/core';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';

@NgModule({
  declarations: [FeatureComponent],
  exports: [FeatureComponent],
  providers: [FeatureService] // Providing the service here limits its visibility within the FeatureModule
})
export class FeatureModule {}

Step 2: Create a Service (feature.service.ts)

import { Injectable } from '@angular/core';

@Injectable()
export class FeatureService {
  constructor() {
    console.log('FeatureService created');
  }

  getMessage(): string {
    return 'Hello from FeatureService!';
  }
}

Step 3: Component that uses this service (feature.component.ts)

import { Component } from '@angular/core';
import { FeatureService } from './feature.service';

@Component({
  selector: 'app-feature',
  template: `<p>{{ message }}</p>`
})
export class FeatureComponent {
  message: string;

  constructor(private featureService: FeatureService) {
    this.message = this.featureService.getMessage();
  }
}

Step 4: Use the FeatureComponent in the AppModule (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FeatureModule } from './feature.module';

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

Output

The FeatureService will only be available for injection within the FeatureModule. Other modules or components outside of FeatureModule won't have access to it unless the service is explicitly exported and imported elsewhere.

Example 3: Component Injector and Element Injector

Step 1: Create a Component-specific Service (child.service.ts)

import { Injectable } from '@angular/core';

@Injectable()
export class ChildService {
  constructor() {
    console.log('ChildService created');
  }

  getMessage(): string {
    return 'Hello from ChildService!';
  }
}

Step 2: Create a Parent Component that provides the service (parent.component.ts)

import { Component } from '@angular/core';
import { ChildService } from './child.service';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <app-child></app-child>
  `,
  providers: [ChildService] // Provides ChildService in the ParentComponent injector
})
export class ParentComponent {}

Step 3: Create a Child Component that uses this service (child.component.ts)

import { Component } from '@angular/core';
import { ChildService } from './child.service';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  message: string;

  constructor(private childService: ChildService) {
    this.message = this.childService.getMessage();
  }
}

Output

Whenever ParentComponent is instantiated, it creates its own injector, along with a new instance of ChildService. The ChildComponent, being a descendant of ParentComponent, will use this new instance of ChildService. If another child component (e.g., SiblingComponent) were added within ParentComponent, they would share the same ChildService instance.

Example 4: Providing a Service in a Directive Element Injector

Step 1: Create a Directive (highlight.directive.ts)

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { HighlightService } from './highlight.service';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2, private highlightService: HighlightService) {
    const highlightColor = this.highlightService.getHighlightColor();
    this.renderer.setStyle(this.el.nativeElement, 'background-color', highlightColor);
  }
}

Step 2: Create the Highlight Service (highlight.service.ts)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Service provided in the root injector
})
export class HighlightService {
  constructor() {
    console.log('HighlightService created');
  }

  getHighlightColor(): string {
    return 'yellow';
  }
}

Step 3: Use Directive in a Component Template (app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <p appHighlight>This text should be highlighted!</p>
    </div>
  `
})
export class AppComponent {}

Output

Since HighlightService is provided in the root injector, any directive or component within the application can use the same instance. When the HighlightDirective is applied to a paragraph element, it receives the single instance of HighlightService and highlights the text accordingly.

Providing the Service Only for the Directive (Using Element Injector)

If we want to create a unique instance of the HighlightService only for the HighlightDirective:

Step 1: Modify the Provider Setting in the Directive (highlight.directive.ts)

import { Directive, ElementRef, Renderer2, Injectable } from '@angular/core';

@Injectable()
export class HighlightService {
  constructor() {
    console.log('HighlightService created');
  }

  getHighlightColor(): string {
    return 'lime'; // Different color for demonstration
  }
}

@Directive({
  selector: '[appHighlight]',
  providers: [HighlightService] // Service provided in the directive element injector
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2, private highlightService: HighlightService) {
    const highlightColor = this.highlightService.getHighlightColor();
    this.renderer.setStyle(this.el.nativeElement, 'background-color', highlightColor);
  }
}

Output

Each time the HighlightDirective is applied to an element, it will create a fresh instance of the HighlightService, causing each highlighted element to potentially have its own unique service instance.

Summary

• providedIn: 'root': Creates a singleton service that's available throughout the application.
• providedIn: SomeModule: Limits the service's availability to that module.
• providedIn: null | Direct Provider: Requires the service to be explicitly provided in a module or component.

Understanding how hierarchical injectors work and where services are provided helps you manage dependencies effectively and avoid issues related to multiple instances or unaccessible services.