Hierarchical Injectors

Angular's DI system is hierarchical. Each component and directive has its own injector that inherits from its parent. This creates a tree of injectors that mirrors the component tree.

Injector Tree

RootInjector (providedIn: 'root')
├── AppComponent injector
│   ├── HeaderComponent injector
│   │   └── NavComponent injector
│   └── MainComponent injector
│       └── ChildComponent injector
└── LazyModule injector
    └── LazyComponent injector

Component-Level Providers

@Component({
  selector: 'app-user-list',
  template: `<app-user-card *ngFor="let user of users" [user]="user"></app-user-card>`,
  providers: [UserService], // New instance for this component subtree
})
export class UserListComponent {
  constructor(private userService: UserService) {}
}

Each UserListComponent gets its own UserService instance. Child components (UserCardComponent) receive the same instance.

Provider Scope Comparison

ViewProviders vs Providers

@Component({
  selector: 'app-parent',
  template: `<ng-content></ng-content>`,
  viewProviders: [Service], // Only available to this component's view, not projected content
})
export class ParentComponent {}

• providers — available to the component, its view, and projected content
• viewProviders — available only to the component's own view (not ng-content)

EnvironmentInjector provides application-wide providers outside the component tree. It is useful for functional guards, resolvers, and utility functions.

EnvironmentInjector

import { EnvironmentInjector, inject, runInInjectionContext } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AppService {
  constructor(private envInjector: EnvironmentInjector) {}

  doSomething(): void {
    runInInjectionContext(this.envInjector, () => {
      const router = inject(Router);
      router.navigate(['/']);
    });
  }
}

createEnvironmentInjector

import { createEnvironmentInjector, EnvironmentInjector } from '@angular/core';

const parentInjector = inject(EnvironmentInjector);
const customProviders = [
  { provide: API_URL, useValue: 'https://custom-api.com' },
];

const childInjector = createEnvironmentInjector(customProviders, parentInjector);

Practical Use Case: Feature Flags

export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>('FEATURE_FLAGS');

// In app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FEATURE_FLAGS,
      useValue: { newDashboard: true, betaFeature: false },
    },
  ],
};

// In a component
@Component({
  selector: 'app-dashboard',
  template: `
    @if (flags().newDashboard) {
      <app-new-dashboard />
    } @else {
      <app-old-dashboard />
    }
  `,
})
export class DashboardComponent {
  flags = inject(FEATURE_FLAGS);
}

When to Use Each Scope