Het dependency injection systeem van Angular biedt gedetailleerde controle over service-instantiatie via providers, tokens en hierarchische injectors. Beheersing van deze concepten onderscheidt ervaren Angular-ontwikkelaars van beginners in technische sollicitatiegesprekken en productiecode.

Kernbegrip

Angular onderhoudt twee parallelle injector-bomen: de ModuleInjector-boom voor services op moduleniveau en de ElementInjector-boom voor component-gerichte dependencies. Resolutie begint op elementniveau en werkt omhoog naar de root.

Provider-configuratiestrategieen in Angular DI

Angular biedt meerdere provider-configuratiestrategieen, elk geschikt voor verschillende use cases. De meest voorkomende configuraties gebruiken useClass, useValue, useFactory en useExisting.

app.config.tstypescript

import { ApplicationConfig, InjectionToken } from '@angular/core';
import { LoggerService } from './services/logger.service';
import { DebugLoggerService } from './services/debug-logger.service';
import { API_CONFIG, ApiConfig } from './config/api.config';

export const appConfig: ApplicationConfig = {
  providers: [
    // useClass: een andere implementatie leveren
    { provide: LoggerService, useClass: DebugLoggerService },
    
    // useValue: een statisch configuratie-object leveren
    { 
      provide: API_CONFIG, 
      useValue: { baseUrl: 'https://api.example.com', timeout: 5000 } 
    },
    
    // useFactory: dependency maken met runtime-logica
    {
      provide: 'FEATURE_FLAGS',
      useFactory: () => {
        const env = import.meta.env.MODE;
        return { debugMode: env === 'development', analytics: env === 'production' };
      }
    },
    
    // useExisting: een alias maken naar een andere provider
    { provide: 'Logger', useExisting: LoggerService }
  ]
};

De useClass-strategie verwisselt implementaties zonder de consumer-code te wijzigen. De useValue-strategie levert statische objecten zoals configuraties. De useFactory-strategie behandelt runtime-beslissingen, en useExisting maakt aliassen voor polymorfe toegang.

InjectionToken voor Type-Veilige Niet-Klasse Dependencies

Terwijl @Injectable werkt voor klasse-gebaseerde services, vereisen niet-klasse waarden zoals configuratie-objecten, primitieven of functies een InjectionToken. Dit token fungeert als unieke sleutel in Angular's DI-registry.

tokens/config.tokens.tstypescript

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

export interface ApiConfig {
  baseUrl: string;
  timeout: number;
  retryAttempts: number;
}

// Generieke parameter garandeert type-veiligheid op het injectiepunt
export const API_CONFIG = new InjectionToken<ApiConfig>('api.config', {
  providedIn: 'root',
  factory: () => ({
    baseUrl: 'https://api.sharpskill.dev',
    timeout: 30000,
    retryAttempts: 3
  })
});

// Token voor primitieve waarden
export const MAX_UPLOAD_SIZE = new InjectionToken<number>('max.upload.size', {
  providedIn: 'root',
  factory: () => 10 * 1024 * 1024 // 10MB
});

De generieke type-parameter op InjectionToken<ApiConfig> propageert naar de inject()-aanroep. TypeScript weet dat de geinjecteerde waarde overeenkomt met het gedeclareerde type, waardoor fouten tijdens compilatie worden gedetecteerd in plaats van tijdens runtime.

De inject()-Functie vs Constructor-Injectie

Angular 14 introduceerde de inject()-functie als alternatief voor constructor-gebaseerde injectie. In Angular 20+ is inject() de voorkeursbenadering geworden, vooral in standalone componenten en functionele contexten.

user.service.tstypescript

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_CONFIG } from '../tokens/config.tokens';

@Injectable({ providedIn: 'root' })
export class UserService {
  // Moderne aanpak: inject() op veldniveau
  private readonly http = inject(HttpClient);
  private readonly config = inject(API_CONFIG);

  getUser(id: string) {
    return this.http.get(`${this.config.baseUrl}/users/${id}`);
  }
}

// Alternatief: constructor-injectie (nog steeds geldig)
@Injectable({ providedIn: 'root' })
export class UserServiceLegacy {
  constructor(
    private readonly http: HttpClient,
    @Inject(API_CONFIG) private readonly config: ApiConfig
  ) {}
}

De inject()-functie elimineert decorator-boilerplate voor tokens en maakt dependency injection mogelijk in niet-klasse contexten zoals functionele guards, resolvers en interceptors.

auth.guard.tstypescript

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

// Functionele guard met inject()
export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

De inject()-functie werkt alleen binnen een injectiecontext: tijdens klasse-constructie, in factory-functies of in functionele Angular-constructies. Aanroepen buiten deze contexten veroorzaakt een runtime-fout.

Klaar om je Angular gesprekken te halen?

Oefen met onze interactieve simulatoren, flashcards en technische tests.

Ontdek Angular

Hierarchische Injectors: ElementInjector vs EnvironmentInjector

Angular onderhoudt twee parallelle injector-hierarchieen die de service-scope en resolutievolgorde bepalen. Begrip van deze architectuur is essentieel voor het beheersen van service-levensduur en zichtbaarheid.

data.service.tstypescript

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

// Root-niveau singleton: enkele instantie voor de hele app
@Injectable({ providedIn: 'root' })
export class GlobalDataService {
  private data = new Map<string, unknown>();
  
  set(key: string, value: unknown) { this.data.set(key, value); }
  get(key: string) { return this.data.get(key); }
}

// Component-scoped: nieuwe instantie per component
@Injectable()
export class ComponentDataService {
  private data = new Map<string, unknown>();
  
  set(key: string, value: unknown) { this.data.set(key, value); }
  get(key: string) { return this.data.get(key); }
}

dashboard.component.tstypescript

import { Component } from '@angular/core';
import { ComponentDataService } from './services/component-data.service';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  // Dit component en alle kinderen krijgen dezelfde instantie
  providers: [ComponentDataService],
  template: `
    <app-widget />
    <app-stats />
  `
})
export class DashboardComponent {}

Wanneer een component een provider declareert, maakt Angular een nieuwe instantie met scope naar de ElementInjector van dat component. Kind-componenten erven toegang tot de providers van de ouder, tenzij ze hun eigen declareren.

Het resolutie-algoritme volgt dit pad:

Controleer de ElementInjector van het aanvragende component
Loop omhoog door de ElementInjector-boom naar voorouders
Controleer de EnvironmentInjector (module- of standalone providers)
Loop omhoog naar de root EnvironmentInjector
Bereik NullInjector en gooi een fout als @Optional() niet is gebruikt

Resolutie-Modifiers: @Self, @SkipSelf, @Optional, @Host

Resolutie-modifiers veranderen hoe Angular de injector-hierarchie doorzoekt. Deze decorators werken met zowel constructor-injectie als de inject()-functie.

panel.component.tstypescript

import { Component, Optional, SkipSelf, Self, inject } from '@angular/core';
import { PanelService } from './panel.service';

@Component({
  selector: 'app-panel',
  standalone: true,
  providers: [PanelService],
  template: `<ng-content />`
})
export class PanelComponent {
  // @Self: alleen zoeken in de injector van dit component, anders falen
  private readonly localService = inject(PanelService, { self: true });
  
  // @SkipSelf: dit component overslaan, zoeken starten vanaf ouder
  private readonly parentService = inject(PanelService, { 
    skipSelf: true, 
    optional: true 
  });
  
  // @Optional: null retourneren in plaats van fout gooien als niet gevonden
  private readonly optionalService = inject(PanelService, { optional: true });

  constructor() {
    // localService is altijd de eigen instantie van het component
    // parentService is de instantie van de ouder of null
    console.log('Local:', this.localService);
    console.log('Parent:', this.parentService);
  }
}

De @Host()-modifier beperkt resolutie tot de injector van het host-element en stopt bij componentgrenzen. Dit is nuttig wanneer een directive toegang nodig heeft tot een service die door zijn host-component wordt geleverd, maar niet hoger in de boom mag zoeken.

highlight.directive.tstypescript

import { Directive, inject, Host, Optional } from '@angular/core';
import { HighlightConfig } from './highlight.config';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  // Alleen kijken naar de providers van het host-component
  private readonly config = inject(HighlightConfig, { 
    host: true, 
    optional: true 
  });

  constructor() {
    // config is null als het host-component HighlightConfig niet levert
    const color = this.config?.color ?? 'yellow';
    // Highlighting toepassen...
  }
}

Multi-Providers voor Uitbreidbare Systemen

Multi-providers maken het mogelijk om meerdere waarden onder een enkel token te registreren. Angular retourneert alle geregistreerde waarden als array, wat plugin-architecturen en uitbreidbaarheidspatronen mogelijk maakt.

validators.tokens.tstypescript

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

export interface Validator {
  validate(value: string): string | null;
}

export const VALIDATORS = new InjectionToken<Validator[]>('validators');

app.config.tstypescript

import { ApplicationConfig } from '@angular/core';
import { VALIDATORS } from './validators.tokens';

const requiredValidator = {
  validate: (value: string) => value ? null : 'Field is required'
};

const minLengthValidator = {
  validate: (value: string) => value.length >= 3 ? null : 'Minimum 3 characters'
};

const emailValidator = {
  validate: (value: string) => 
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : 'Invalid email format'
};

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: VALIDATORS, useValue: requiredValidator, multi: true },
    { provide: VALIDATORS, useValue: minLengthValidator, multi: true },
    { provide: VALIDATORS, useValue: emailValidator, multi: true }
  ]
};

validation.service.tstypescript

import { Injectable, inject } from '@angular/core';
import { VALIDATORS, Validator } from './validators.tokens';

@Injectable({ providedIn: 'root' })
export class ValidationService {
  private readonly validators = inject(VALIDATORS);

  validate(value: string): string[] {
    // validators is een array van alle geregistreerde validators
    return this.validators
      .map(v => v.validate(value))
      .filter((error): error is string => error !== null);
  }
}

De multi: true vlag instrueert Angular om alle providers voor dit token in een array te verzamelen. Zonder deze vlag zouden latere providers eerdere overschrijven.

Sollicitatievragen over Angular Dependency Injection

Technische sollicitatiegesprekken onderzoeken vaak het begrip van Angular's DI-systeem. Hier zijn vragen die kandidaten met productie-ervaring onderscheiden.

V: Wat gebeurt er wanneer dezelfde service zowel op module- als componentniveau wordt geleverd?

De provider op componentniveau maakt een aparte instantie met scope naar de subboom van dat component. Services die in die subboom worden geinjecteerd, ontvangen de instantie van het component, niet de singleton op moduleniveau. Dit maakt state-isolatie mogelijk, bijvoorbeeld wanneer elke tab zijn eigen formulierstaat nodig heeft.

V: Waarom InjectionToken gebruiken in plaats van een string literal?

String tokens riskeren botsingen tussen bibliotheken of verschillende delen van een applicatie. InjectionToken maakt een unieke runtime-referentie die niet kan botsen. De generieke type-parameter biedt ook compile-time type-veiligheid die string tokens missen.

V: Wanneer gooit inject() een fout vs retourneert het undefined?

Standaard gooit inject() een fout wanneer de dependency niet wordt gevonden. Het doorgeven van { optional: true } verandert het retourtype naar T | null en retourneert null in plaats van een fout te gooien. Dit komt overeen met het gedrag van de @Optional() decorator.

V: Leg het verschil uit tussen providedIn: 'root' en leveren in de providers-array van een module.

Beide maken singletons, maar providedIn: 'root' maakt tree-shaking mogelijk. De service wordt alleen in de bundle opgenomen als deze daadwerkelijk ergens wordt geinjecteerd. Module-niveau providers worden altijd opgenomen ongeacht gebruik.

V: Hoe beinvloedt lazy loading de service-scope?

Lazy geladen modules krijgen hun eigen kind-EnvironmentInjector. Services die in een lazy module worden geleverd, hebben scope beperkt tot die module en zijn kinderen. Een service met providedIn: 'root' blijft een echte singleton over alle modules, lazy of niet.

Voor oefenvragen over Angular services en DI-patronen, zie Angular sollicitatievragen over services en dependency injection.

Praktische Patronen: Configuratie en Feature Flags

Echte applicaties combineren deze DI-concepten voor configuratiebeheer. Dit patroon gebruikt InjectionToken, factory providers en omgevingsbewustzijn.

feature-flags.config.tstypescript

import { InjectionToken, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export interface FeatureFlags {
  newCheckout: boolean;
  darkMode: boolean;
  betaFeatures: boolean;
}

export const FEATURE_FLAGS = new InjectionToken<FeatureFlags>('feature.flags', {
  providedIn: 'root',
  factory: () => {
    const platformId = inject(PLATFORM_ID);
    
    if (!isPlatformBrowser(platformId)) {
      // SSR: veilige standaardwaarden retourneren
      return { newCheckout: false, darkMode: false, betaFeatures: false };
    }

    // Browser: localStorage of remote config controleren
    const stored = localStorage.getItem('featureFlags');
    if (stored) {
      return JSON.parse(stored);
    }
    
    return { newCheckout: true, darkMode: false, betaFeatures: false };
  }
});

feature-flag.directive.tstypescript

import { Directive, Input, TemplateRef, ViewContainerRef, inject } from '@angular/core';
import { FEATURE_FLAGS } from './feature-flags.config';

@Directive({
  selector: '[appFeatureFlag]',
  standalone: true
})
export class FeatureFlagDirective {
  private readonly flags = inject(FEATURE_FLAGS);
  private readonly templateRef = inject(TemplateRef<unknown>);
  private readonly viewContainer = inject(ViewContainerRef);

  @Input() set appFeatureFlag(flag: keyof typeof this.flags) {
    if (this.flags[flag]) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Deze directive rendert content conditioneel op basis van feature flags, met de flag-configuratie gecentraliseerd in een injecteerbaar token.

Begin met oefenen!

Test je kennis met onze gespreksimulatoren en technische tests.

Maak mijn gratis account aan

Productie-Klare Angular DI Praktijken

Gebruik providedIn: 'root' voor applicatie-brede singletons die profiteren van tree-shaking
Prefereer in Angular 20+ inject() boven constructor-injectie voor schonere syntax en functionele compatibiliteit
Beperk stateful services tot componenten wanneer isolatie nodig is, niet op moduleniveau
Maak InjectionToken voor niet-klasse dependencies om type-veiligheid te garanderen en botsingen te vermijden
Pas @Optional() toe wanneer een dependency mogelijk niet bestaat, vooral voor plugins of optionele features
Test componenten met overschreven providers met TestBed.overrideComponent() voor isolatie
Gebruik multi-providers voor uitbreidbaarheidspatronen zoals validators, interceptors en handlers

Geavanceerde Angular Dependency Injection in 2026: Providers, Tokens en Sollicitatievragen

Provider-configuratiestrategieen in Angular DI

InjectionToken voor Type-Veilige Niet-Klasse Dependencies

De inject()-Functie vs Constructor-Injectie

Klaar om je Angular gesprekken te halen?

Hierarchische Injectors: ElementInjector vs EnvironmentInjector

Resolutie-Modifiers: @Self, @SkipSelf, @Optional, @Host

Multi-Providers voor Uitbreidbare Systemen

Sollicitatievragen over Angular Dependency Injection

Praktische Patronen: Configuratie en Feature Flags

Begin met oefenen!

Productie-Klare Angular DI Praktijken

Zie jij de bug in Angular?

Gerelateerde artikelen

Angular Signals en Computed in 2026: Fijnkorrelige Reactiviteit en Sollicitatievragen

Angular Forms in 2026: Reactive Forms, Validatie en Technische Sollicitatievragen

Angular 19 sollicitatievragen: Signals, SSR en onmisbare concepten